html - 如何使用css使表格在长文本上使用多行

Question

如何让表格在每一行上使用多行超过该表格的max-width

.table {
  font-size: 12px;
  border-bottom: 1px solid #dddddd;
  color: #8d8d8d;
  max-width: 400px;
}
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom: 1px solid #C1C3D1;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
  padding: 7px; 

}
tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
td {
  background:#FFFFFF;
  vertical-align:middle;
  word-wrap:break-word;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
  padding: 7px;
}

<pre>               
<table id="TBLTBLDATA" border="1" cellpadding="0" cellspacing="0" class="table" style="position: relative;z-index: 100; width: 296px; height: 26px; padding: 0; font-weight: normal; font-style: normal; text-decoration: none;font-size: 13px; ">
<tr><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">TEST</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">TEST</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">TEST</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">TEST</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">Data</td></tr>
<tr><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">123</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">XXX</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">0000000</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">57-41</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td></tr></table></pre>

Answer 1

我会给你两个解决方案。

在表格单元格中静态创建的文本

您在 TD Cell 中的文本是在您开发网站时给出的，而不是由 自动创建的，可以说是 XML 响应。然后根据http://www.uwec.edu/help/html/tb-multiline.htm这是你的答案:

When the text in a single table cell exceeds a few words, a line break (<BR>)may improve the appearance and readability of the table. The linebreak code allows data to be split into multiple lines. Place the linebreak code <BR> within the text at the point(s) you want the line tobreak. Notice in the examples below that the line break code can beused in data cells as well as in headers.

Remember that the user of your document has final control over fontand size. Some line break codes, though appropriate with yourpreference settings, may be inappropriate under other conditions.

在表格单元格中动态创建的文本

否则，如果单元格内的文本是动态显示的，而您不知道它的实际大小，则可以执行以下操作:

1. 向要放置效果的表格单元格添加一个类。虽然没有必要这样做。

2. 将以下样式添加到您想要的表格列中。希望对您有所帮助。

   text-wrap: normal;
   word-wrap: break-word;