Длинная строка в таблице HTML, портящая расположение других строк

StackOverflow https://stackoverflow.com/questions/775248

  •  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.Вам также необходимо будет настроить сообщения позиция чтобы это сработало.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top