Как получить пролет, чтобы взять всю высоту содержащего td

У меня есть таблица, а в левом столбце я хочу добавить индикатор для строки. Я использую span для отображения индикатора, но я не могу заставить span заняться полной высотой:

<table>
    <tr>
        <td style="padding:0px;"><span style="height:100%; width:5px; background-color:pink;">&nbsp;</span></td>
        <td>Some content</td>
        <td>Some more content</td>
    </tr>
</table>

В таблице есть отступы 15px, поэтому для индикатора col удаляем прописку и устанавливаем пролет на высоту: 100%:

td {padding:15px;}
table {background-color: yellow;}

Эта сценария показывает, что она работает в данный момент - что розовая полоса должна охватывать всю высоту содержащего td.

Как мне это сделать? Обратите внимание: я не могу установить стиль на td вместо диапазона, потому что это вызывает другие проблемы с рендерингом (он смещает border-bottom строк th, если я это делаю).

Ответ 1

Должно добавить переполнение: автоматически в диапазон (и отображение: блок, конечно)

<table>
   <tr>
      <td style="padding:0px;"><span style="height:100%; width:5px; background-color:pink;display:block;overflow:auto">&nbsp;</span></td>
      <td>Some content</td>
      <td>Some more content</td>
  </tr>
</table>

Ответ 2

Вам не нужен <span>. Все, что вам нужно, - установить вправо и влево padding на 0, чтобы индикатор цветной строки был всего 5 пикселей в ширину, так как вам нужно, и оставьте верхнюю и нижнюю прокладки 15 как и в других ячейках, поэтому цвет фона охватывает всю высоту ячейки/строки.

HTML

  <table>
    <tr>
        <td class="rowindicator">&nbsp;</td>
        <td>Some content</td>
        <td>Some more content</td>
    </tr>
</table>

CSS

    table{background: yellow;}
    td{padding:15px;}
    .rowindicator{
         width:5px;                       
         padding-right:0px;  
         padding-left:0px;                       
         background-color:pink;
    }

Демо: http://jsfiddle.net/mNjsb/34/

Ответ 3

Может быть, мне что-то не хватает, но если вы просто используете элемент span для обеспечения цвета для ячейки, почему бы не просто установить цвет фона ячейки на розовый?

<html>
<head>
<style>
td {padding:15px;}
table {background-color: yellow;}
</style>
</head>
<body>
<table>
    <tr>
        <td style="padding:0px;width:5px; background-color:pink">&nbsp;</td>
        <td>Some content</td>
        <td>Some more content</td>
    </tr>
</table>
</body>
</html>

Ответ 4

По какой-то нечетной причине добавление отступов к ячейке таблицы приводит к тому, что высота 100% "ломается".

Путь вокруг этого - добавить "фиктивную высоту" к ячейкам таблицы:

td {padding:15px; height: 5px;}

Это, конечно, помимо использования блочного элемента:

<div style="height:100%; width:5px; background-color:pink;">&nbsp;</div>

Живой тест.

Ответ 5

То, что вы делаете, неверно. Не рекомендуется использовать элементы исключительно для стилизации, особенно когда эти элементы пустые. подумайте об удалении первого td и сделайте это вместо этого:

td:first-child{
    border-left:4px solid pink
}

здесь jsfiddle: http://jsfiddle.net/mNjsb/16/

edit: но если вы настаиваете на этом, span - это встроенный элемент. это означает, что вам нужно добавить

display: inline-block

если вы хотите стилизовать его с высотой и whatnot

Ответ 6

span - это встроенный элемент, поэтому для полной высоты вам нужно добавить display: block; или иначе использовать элемент уровня блока <div>

Ответ 7

span{
    display: inline-block;
    margin: 0;
}

Это будет работать.