Длинная строка в таблице HTML, портящая расположение других строк
-
13-09-2019 - |
Вопрос
У меня есть таблица html, служащая макетом страницы (я знаю, что это плохая практика).Эта таблица выглядит примерно так:
Label1 Value1
Label2 Value2
Label3 Value3
Label4 Value4a Value4b Value4c Value4d
Я только что добавил сообщение об ошибке проверки, которое может быть довольно большим в первой строке, так что теперь оно выглядит так:
Label1 Value1 ErrorMessage
Label2 Value2
Label3 Value3
Label4 Value4a Value4b Value4c Value4d
Чтобы проект работал, я добавил colspan в ячейку, содержащую сообщение проверки, чтобы он охватывал всю таблицу.Он работает с сообщениями об ошибках достаточно маленькой длины, чтобы не переполнять таблицу.Помимо этого я получаю:
Label1 Value1 Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage
Label2 Value2
Label3 Value3
Label4 Value4a Value4b Value4c Value4d
Строка 4 полностью перепутана.Есть ли способ указать, что содержимое ячейки сообщения об ошибке должно переполнять таблицу, а не увеличивать пространство для других ячеек в тех же столбцах?Может быть, какой-нибудь волшебный CSS?
Решение
Чтобы текст выходил за пределы таблицы, текстовый элемент должен либо находиться на более высоком уровне (иерархически), чем таблица, либо он должен быть расположен независимо от таблицы.
Вы можете сделать это позже, выполнив что-то вроде:
Label1 Value1 <span class="outside">Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage</span>
Label2 Value2
Label3 Value3
Label4 Value4a Value4b Value4c Value4d
И затем даем внешний класс:
.outside
{
position:absolute;
}
Вам придется выполнить дополнительное форматирование, чтобы оно отобразилось в месте исправления.
РЕДАКТИРОВАТЬ:
Только что понял, что форматирование немного очищается, если вы также используете идею Хосе и используете span вместо div.
table
{
table-layout:fixed;
width:100em;
}
Другие советы
Хорошо, вот решение, которое я тестировал и работает в Firefox 3:
<style type="text/css">
#error {
width: inherit;
overflow: auto;
padding: 0;
margin: 0;
}
</style>
<table width="400">
<tr>
<td width="100">A</td>
<td colspan="3" width="300">
<div id="error">Really long line...</div>
</td>
</tr>
<tr>
<td>1A</td>
<td>1B</td>
<td>1C</td>
<td>1D</td>
</tr>
<tr>
<td>2A</td>
<td>2B</td>
<td>2C</td>
<td>2D</td>
</tr>
</table>
Это очень хакерски, но может сработать в вашей ситуации.Если возможно, укажите статическую ширину для каждой из ячеек содержимого.Затем добавьте дополнительную ячейку без ширины.Последняя ячейка должна затем расшириться, оставив остальные с заданной шириной.
Редактировать:На основании вашего комментария вы также можете попытаться дать сообщение об ошибке выше z-индекс в CSS.Вам также необходимо будет настроить сообщения позиция чтобы это сработало.