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>

當然，您可以根據需要插入表結構。