Question

我对表中的所有td都应用了100％的宽度，但是只有该行的第一个td获得了100％的宽度。而另一个td则崩溃了。

table, th, td {
        border: 1px solid black;
        width: 100%;
    }

<table>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>
    </table>
    
    <p><b>Note:</b> The width attribute is not supported in HTML5. Use CSS instead.</p>

Answer 1

此样式块应为：

<style>
table{
    border: 1px solid black;
    width: 100%;
}
th, td {
border: 1px solid black;
}
</style>

Answer 2

此代码段将演示表格的工作原理

table{
    border: 1px solid black;
    width: 100%;
}

td:nth-child(1),th:nth-child(1){
    width: 70%
}

td:nth-child(2),th:nth-child(2){
    width: 30%
}

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

您需要为列指定相对宽度。

如果表格的宽度为100％，它将占用容器的整个宽度（div，主体）

这些列必须适合该宽度，并且它们的宽度之和必须不超过100％（该宽度。如果要使用三列，则可以为其中两列分配一个宽度，而第三列将适合在剩余的空间。第一列20％，第二列30％。第三个将适合剩余的50％。

第n个子级伪选择器使您可以确定每列的特定CSS格式（brickt中的数字是该列的索引）。因此，在该示例中，我将第一列的宽度设置为整个表的70％，将第二列的宽度设置为30％（我可以忽略掉它，因为它无论如何都适合表的整个宽度）

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
    table{
      width: 100%;
      text-align: center;
    }
</style>
</head>
<body>

  <table>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>
    </table>
</body>
</html>

Answer 4

将取决于表的呈现方式。表格本身具有一定的宽度，单元格将采用固定或相对的格式（取决于所使用的单位，固定/相对，例如像素与百分比）。渲染第一个td时，它会选择100％的宽度，而当渲染第二个单元格时，则没有空间再分配100％的宽度。如果期望的结果是一个具有相同宽度的列的表，则可以添加table-layout：fixed；（还有更多解决方案）

如果想进一步了解所有这些内容，请搜索“表渲染模型”。桌子真的很棘手（邪恶又有趣）。

6
5B
5A
5
4
3
2
1
UG
GM
G
LG
B1
B2

table{
        border: 1px solid black;
        width: 100%;/*this is the width of the table, as % of the 'available width' on the container*/
        table-layout: fixed;
    }
  td {
        border: 1px solid black;
        width: 55%;/*does not really matters the ammount, as it is the same for all columns and its sum is 100% or more*/
    }

应用于表格单元格时css样式不起作用

4 个答案: