如何使用 CSS 将 Bootstrap 中的 table 的高度设置为宽度的值？

Question

我有一个 Table，使用 Bootstrap CSS 设计。我需要将高度设置为与 Table 的宽度值相同。在Bootstrap中，宽度可以根据设备改变。请协助

Note: Kindly give solution using CSS. Don't use the Javascript or any other raw value feeding.

+---------+
|   CSS   |
|  Table  |
|   1:1   |
+---------+

我的HTML源代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bootstrap Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
  <table class="col-lg-12 col-sm-12 col-md-12 col-xs-12" style="height:calc(width);" border="1">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2" rowspan="2">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
</body>
</html>

Answer 1

如评论中所述，这里的基本问题是让各个单元格保持正方形。在 css 中执行此操作相当微不足道，正如 this question 中的许多答案所证明的那样。真正的问题是处理可能大小不一的内容。

这是一种实现方法，尽管不可否认它有点老套：在每一行中至少有一个单元格添加一个 div，其中包含 padding-bottom: 100% 和 position:relative .然后向每个单元格添加另一个 div 和 position:absolute。最后一个 div 将是您放置内容的地方。然后我不得不删除 bootstrap 添加的单元格填充（或者你可以将单元格宽度设置为 25% 并跳过 bootstrap class，这可能不会给你任何优势table 本身）。您必须在 div 上使用 overflow 属性来控制内容在各种情况下的显示方式。

我还给您写了一封 fiddle，看起来它可以解决您的问题。

注意：此模型假设 table 中始终有 4 行且只有 4 行（因此 padding-bottom: 25%）。

如何使用 CSS 将 Bootstrap 中的 table 的高度设置为宽度的值？

How to set Height of a table in a Bootstrap as the value of Width using CSS?

html

css

bootstrap-modal