HTML表格宽度与CSS

Question

我收到了数据，并将其解析为网页上的表格。 彼此并排有3个单元。 （单元格0,0：单元格0,1：单元格0,2）

我正在尝试使其在div中均匀分布，从而使第一个单元格的文本左对齐，中间单元格的中心对齐，最后一个单元格的右对齐。

我已经尝试了以下CSS

 td { width: calc(100%/3); } 

 <table border=1 style="border: 1px red dashed; width: 250px;"> <tr> <td>first</td> <td>second with wider contents</td> <td>third</td> </tr> </table> <table border=1 style="border: 1px blue dashed; width: 250px;"> <tr> <td>first</td> <td>second</td> <td>third with wider contents</td> </tr> </table> 

它没有给我我想要的输出。 我要完成的工作是在一页上有多个表，并希望单元格一直向下对齐

Answer 1

您是否将表格设置为嵌套表格的div的整个宽度？

例如：

div {
  width: 300px;
}

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


td {
  width: calc(100%/3);
  border: 1px solid black;
}

刚刚讲完了，我想这就是您要寻找的： https : //jsfiddle.net/nsxLfv00/

Answer 2

如果要在三个单元格中设置内容的对齐方式，请使用第n个子css选择器

td:nth-child(1){
   text-align: left;
}

并相应地用于中间和右侧列。

Answer 3

虽然在纯CSS中是可行的，但我建议您使用Bootstrap，Flexbox或任何网格框架轻松实现这一目标。 在BS中，它将类似于：

<div class=container>
  <div class="row">
    <div class="col-sm-4">
      Your first cell content
    </div>
    <div class="col-sm-4">
      second
    </div>
    <div class="col-sm-4">
      third
    </div>    
  </div>
</div>

当然，您可以根据需要插入表结构。