Question

我有一张桌子，其中左边的td占据了大部分空间，而右边的td空间非常小，迫使这些字断裂。

我正在尝试使两个TD都与文本内容的宽度相同。我在网上做了一些研究，但没有找到解决问题的方法。

任何帮助都会非常感激！下面是我的表格代码和css

CSS：

#order_info_container {
    width: 620px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

#customer_service {
    padding-top: 10px;
    vertical-align: top;
    text-align : right;
}

#order_information { padding-top: 20px; }

#totals_o {
    padding-top: 20px;
    text-align: right;
}

HTML：

 <table id='order_info_container'>
  <!--This left td is taking most of the space -->
  <tr>
    <td><img id='o_summary_logo' src='o_summary_logo.png'></td>
    <!--This right td is being squished -->
    <td id='customer_service'><b>Customer Service # (646)-397-5751</b><br>
      Thank you for your business </td>

    <!--This left td is taking most of the space -->
  <tr id='totalswrapper_o'>
    <td id='order_information'>Order Placed - 07/01/14 12:18AM<br>
      <span id='order_number'>Order # - 775</span><br>
      <span class='conf_num'>Confirmation # - 81<br>
      </span></td>

    <!--This right td is being squished -->
    <td id='totals_o'>Sub Total = $28.95<br>
      Tax =   $2.57<br>
      Grand Total =  $33.52<br></td>
  </tr>
</table>

Answer 1

您可以在表格中使用table-layout: fixed属性，以便所有单元格具有相同的宽度。 jsfiddle here上的示例：

HTML：

<table>
    <tr>
        <td>column1 Lorem Ipsum dolor sit amet</td>
        <td>column2 consectetur…</td>
    </tr>
</table>

CSS：

table {
    table-layout: fixed;
    width: 200px;
    border-collapse: collapse;
}

td {
    border: 1px solid red;
}

此外，fixed布局会自动为您拥有的任意数量的单元格提供相同比例的长度，即如果您有2个单元格，每个单元格将占表格的50％，3将是33每个％等等......你可以用小提琴来试试这个。

Answer 2

在CSS中为<td>定义50％的宽度可以解决此问题。话虽如此，如果您只有2 <td>，则可以使用50％。

table td{
    width: 50%;
}

FIDDLE。我在小提琴中添加了一个边框，以清楚地显示这种效果。

更好的方法是使用table-layout: fixed;上的table属性，例如his answer中的@arielnmz建议。即使您有动态生成的列，它也能发挥最佳效果。这样，您就不必计算和定义列占用的空间。他们总是平分秋色。所以，你应该采用这种方法。

table{
    width: 100%;
    table-layout: fixed;
}

FIDDLE

为什么我的TD元素不包围文本内容？

2 个答案: