Question

这是我的代码段 -

<table style="border:1px solid #898989; table-layout:fixed">
<tr>
<td width="25%" style="border:1px solid #898989; table-layout:fixed">
LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
</td>
<td width="75%" style="border:1px solid #898989; table-layout:fixed">
ShortText
</td>
</tr>
</table>

我的输出看起来像这样 -

<td>内容不包含空格。我希望<td>的宽度在定义时保持固定（LongText为25％，ShortText为75％）。我可以使用任何CSS属性吗？

Answer 1

使用此

table {
  width: 100%; /* As wide as the containing block */
  word-wrap: break-word; /* Allow to break too long words */
}

＆＃13;

table {
  border: 1px solid #898989;
  table-layout: fixed;
  width: 100%;
  word-wrap: break-word;
}
td {
  border: 1px solid #898989;
}
td:first-child {
  width: 25%;
}

＆＃13;

<table>
  <tr>
    <td>
      LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
    </td>
    <td>
      ShortText
    </td>
  </tr>
</table>

＆＃13;

Answer 2

如果你想使用CSS，你可以简单地在CSS中定义宽度。

<td  style="width=25%; overflow:hidden; border:1px solid #898989; table-layout:fixed">

选择溢出属性

Answer 3

首先，您需要为表格提供固定宽度，然后任何td将根据表格的宽度获取宽度。我试试这个请检查并告诉我是否为你工作：

<table style="border:1px solid #898989; table-layout:fixed;width:600px;">
<tr>
<td width="25%" style="border:1px solid #898989; table-layout:fixed;word-wrap:break-word">
LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
</td>
<td width="75%" style="border:1px solid #898989; table-layout:fixed;word-wrap:break-word">
ShortText
</td>
</tr>
</table>

这取决于你想要多少宽度的表，所以如果你想要你的表宽度固定然后提供固定宽度，否则如果你没有提供任何宽度，你的表将采用与它的父div相同的宽度，例如：

                 <div style="width:600px">
                    <table style="border:1px solid #898989; table-layout:fixed;width:100%;">
                    <tr>
                    <td width="25%" style="border:1px solid #898989; table-layout:fixed;word-wrap:break-word">
                    LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
                    </td>
                    <td width="75%" style="border:1px solid #898989; table-layout:fixed;word-wrap:break-word">
                    ShortText
                    </td>
                    </tr>
                    </table>
                </div>

在这种情况下，表格将占用500px的宽度，因为表格没有任何宽度，因此它的宽度与父div相同。如果您将提供宽度，那么根据该宽度将作为我的第一个评论。

修复html标签的宽度

3 个答案: