html - 为什么我的 TD 元素没有环绕文本内容？

Question

我有一张 table ，左边的 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%，依此类推……你可以玩 fiddle 来试试这个。