Как я могу заставить таблицу использовать несколько строк в каждой строке, превышающей max-width этой таблицы

enter image description here

.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>
2
RepeatUntil 27 Дек 2015 в 15:28

2 ответа

Лучший ответ

Я дам вам два решения.

Статически созданный текст в ячейке таблицы

Ваш текст в ячейке TD предоставляется на момент разработки веб-сайта, а не создается автоматически, скажем, ответом XML. Затем согласно http://www.uwec.edu/help/html/tb -multiline.htm вот ваш ответ:

Когда текст в одной ячейке таблицы превышает несколько слов, разрыв строки (
) может улучшить внешний вид и удобочитаемость таблицы. Код разрыва строки позволяет разбить данные на несколько строк. Поместите код разрыва строки
в текст в той точке (ах), где вы хотите, чтобы линия разрывалась. Обратите внимание, что в приведенных ниже примерах код разрыва строки можно использовать в ячейках данных, а также в заголовках.

Помните, что пользователь вашего документа имеет окончательный контроль над шрифтом и размером. Некоторые коды разрыва строки, хотя и соответствуют вашим настройкам предпочтений, могут не подходить при других условиях.

Динамически создаваемый текст в ячейке таблицы

В противном случае, если ваш текст внутри ячейки поступает динамически, и вы не знаете его фактический размер, вы можете сделать следующее:

  1. Добавьте класс в ячейку таблицы, в которой вы хотите разместить эффект. Хотя это необязательно.

  2. Добавьте следующее в стиль к нужному столбцу таблицы ... Надеюсь, это вам помогло.

    text-wrap: normal;
    word-wrap: break-word;
    
4
Community 20 Июн 2020 в 09:12

Просто добавьте word-wrap: break-word; в свой td CSS. Если вы хотите использовать только одну строку и скрыть лишние символы, используйте overflow: hidden;

1
arturas 27 Дек 2015 в 13:09