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

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

0 голосов
/ 22 апреля 2009

У меня есть 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?

Ответы [ 3 ]

0 голосов
/ 22 апреля 2009

Хорошо, вот решение, которое я тестировал и работает в 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>
0 голосов
/ 22 апреля 2009

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

Позднее вы можете сделать что-то вроде: 

Label1    Value1    <span class="outside">Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage</span>
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b                 Value4c               Value4d

А затем дать внешний класс: 

.outside
{
    position:absolute;
}

Вам потребуется выполнить дополнительное форматирование, чтобы оно отображалось в месте исправления.

EDIT:

Просто понял, что форматирование немного проясняется, если вы используете идею Хосе и span вместо div. 

table 
{
   table-layout:fixed;
   width:100em;
}
0 голосов
/ 22 апреля 2009

Это очень хакерский, но может работать для вашей ситуации. Если возможно, укажите статическую ширину для каждой ячейки контента. Затем добавьте лишнюю ячейку без ширины. Последняя ячейка должна затем расширяться, оставляя остальные на их заданной ширине.

Редактировать: на основе вашего комментария Вы также можете попытаться задать для сообщения об ошибке более высокое значение z-index в css. Вам также нужно установить сообщения position , чтобы эта работа работала.

...