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

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的示例:

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%,依此类推...您可以尝试这个小提琴.