Question

我创建了一个包含两列的父表，在每列中我有6个子表（每个3个），所以我看起来像是一个简报。

我想要的是让子表向下延伸，因为我用X量的文本填充它们但它不起作用。我设置了我的子表宽度并将CSS设置为table-layout:fixed;但是当我在其中一个子表中输入太多时，文本会流出而不是包装。

这很奇怪，因为当我第一次创建表格时，它工作得很好，但现在我无法弄清楚我做了什么来阻止它工作。

在人们告诉我使用div之前，我正在使用桌子，因为它将成为Outlook的电子邮件传单。

HTML：

<table width="700" border="0" cellspacing="0" cellpadding="0">

  <tr>
    <td width="350" valign="top" bgcolor="#FFFFFF" style="padding-top:10px;" scope="row">

      <center>

        <table width="90%" border="0" height="100%" cellpadding="0" cellspacing="0" class="content">
          <tr>
            <td height="30px" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"><strong>Title</strong></td>
            </tr>
          <tr>
            <td  valign="top" bgcolor="#F4F4F4" scope="row" style="padding:10px;">&nbsp;</td>
            </tr>
          </table> 

        </center>   
        <br /> 

    <center>
        <table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="30px" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"><strong>Title</strong></td>
            </tr>
          <tr>
            <td valign="top" bgcolor="#F4F4F4" style="padding:10px;" scope="row">&nbsp;</td>
            </tr>
          </table>         
        </center>
        <br>

      <center>
        <table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="30" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"><strong>Title</strong></td>
            </tr>
          <tr>
            <td bgcolor="#F4F4F4" scope="row" valign="top" style="padding:10px;">&nbsp;</td>
            </tr>
          </table>         
        </center>


    <td width="350" valign="top" bgcolor="#FFFFFF" style="padding-top:10px;">

      <center>
        <table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="30px" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"><strong>Title</strong></td>
            </tr>
          <tr>
            <td valign="top" bgcolor="#F4F4F4" style="padding:10px;" scope="row">&nbsp;</td>
            </tr>
          </table>         
        </center>
        <br>


      <center>
        <table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="30" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"><strong>Title</strong></td>
            </tr>
          <tr>
            <td bgcolor="#F4F4F4" scope="row" valign="top" style="padding:10px;">&nbsp;</td>
            </tr>
          </table>         
        </center>
        <br />

      <center>
        <table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="30" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"><strong>Title</strong></td>
            </tr>
          <tr>
            <td bgcolor="#F4F4F4" scope="row" valign="top" style="padding:10px;">&nbsp;</td>
            </tr>
          </table>         
      </center>

      </td>
  </tr>
</table>

CSS

body {
    padding:0px;
    margin:0px;
    background-color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
}

table {
    table-layout:fixed;
}

strong {
    color:rgb(255,255,255);
    font-size:14px;
}

Answer 1

将word-break添加到<td>将解决此问题。

word-break:break-all;

<强> JSFiddle demo

Answer 2

普通文本会很好地包装。很长的话确实不会包装，但我怀疑你是否会说很长的话。

如果是这样，您可以考虑在其中添加以添加软连字符。根据您可以访问的任何脚本语言，甚至有些库可以根据字典为您添加这些库。

除此之外，您可能会实施@NickRs建议是安全的，但请记住它会在任何地方破坏这个词，因此它可能会在一个丑陋或不方便的地方破坏。不是你想要的时事通讯。

为什么我的文字没有包裹在我的表格单元格中？

2 个答案: