Почему «Vertical-align: bottom» не работает на этой таблице - PullRequest
Новая
       34

Почему «Vertical-align: bottom» не работает на этой таблице

1 голос
/ 01 декабря 2010

Это сводит меня с ума, к сожалению, ха-ха. Я не могу понять, почему я не могу сделать так, чтобы "X" в моей таблице совпали с основанием таблицы ... Я попытался выровнять по вертикали в разных местах CSS, но безрезультатно :( Также правильно ли я использую пустые места в моей таблице?

Вот фрагменты моих HTML и CSS файлов ... любые комментарии будут очень благодарны 

<html>
<head>
<title>Day4: Table King</title>
<link rel="stylesheet" type="text/css" href="stylesday4.css" />
</head>

<body>
 <table id="products">
  <tr>
  <th><span></th>
<th>Free Version</th>
<th>Lite Version</th>
<th>Full Version</th>
 </tr>
 <tr>
  <td>Advertising</td>
  <td id="td">X</td>
  <td><span></td>
  <td><span></td>
 </tr>
 <tr class="alt">
  <td>Catering Software</td>
  <td><span></td>
  <td id="td">X</td>
  <td id="td">X</td>
 </tr>

.... 

#products
{
border-collapse:collapse;
width:100%;
}
#products th, #products td
{
border:1px solid #0000FF;
background-color:#C0C0C0;
padding:3px 2px 7px 5px;
}
#products th
{
font-size:20px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#0000FF;
padding-top:4px;
padding-bottom:5px;
background-color:green;
}
#products td
{
vertical-align:bottom;
}
#products tr
{
text-align:center;
color:#0000FF;
}
#products tr.alt td
{
color:blue;
background-color:#A7C942;
}

Ответы [ 5 ]

3 голосов
/ 01 декабря 2010

Вы можете использовать position: relative на своих td и table, а затем переместить td вниз, используя bottom: 0px.

Тем не менее, я думаю, что этот сайт должен ответить на ваш вопрос более четко: http://shouldiusetablesforlayout.com

1 голос
/ 01 декабря 2010

С предоставленными вами HTML и CSS вертикальное выравнивание работает, как я и ожидал.Я настроил небольшой тест на jsfiddle здесь http://jsfiddle.net/dttMd/.Я поместил несколько разрывов строк в первый ряд, чтобы подтвердить выравнивание нижнего текста.Если это не то, что вам нужно, не могли бы вы уточнить, что именно вам нужно.

Что касается пустых ячеек, то, что вы делаете, неправильно, поскольку элементы <span> должны иметь закрывающий тег.Мое личное предпочтение - просто вставить &nbsp; в клетки.Я не думаю, что действительно существует «правильный» путь, хотя обязательно (хотя я рад, что меня исправили).

1 голос
/ 01 декабря 2010

это потому, что у вас есть нижний отступ 7px в td. Вы можете изменить его на 

padding:3px 2px 0 5px;

и интервал пропал.

http://jsfiddle.net/6AAvH/2/

0 голосов
/ 18 марта 2015

Заполнение может испортить макет и высоту / ширину. Избавьтесь от отступов от вашего td и вместо этого назначьте ему высоту.

Иногда высота линии может создать впечатление, что она не выравнивается по верху или низу. Если размер шрифта меньше размера контейнера, он может наследовать высоту строки. Если вы установите высоту строки на размер шрифта (или просто line-height: 1) и задаете высоту td, это должно сработать. 

<td height="18" valign="bottom" style="font-size:9px; line-height:9px;">TEXT</td>

В вашем <span> отсутствует закрывающий </span>, и вы не должны использовать интервал, чтобы занимать пространство, поскольку он является встроенным элементом. Для таблиц вам даже не нужен заполнитель, но если вам удобнее, вы можете использовать &nbsp; или, если вы хотите, чтобы он наследовал какой-то стиль заполнения / поля, вы можете использовать этот элемент (<p>&nbsp;</p> или <h3>&nbsp;</h3>).

0 голосов
/ 04 апреля 2011

Вы можете просто добавить valign="bottom" в каждый td, и это приведет к выравниванию контента внизу и будет поддерживаться всеми браузерами в мире!

Надеюсь, это поможет вам.

...