HTML / CSS: выравнивание текста таблицы - PullRequest
Новая
       14

HTML / CSS: выравнивание текста таблицы

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

У меня есть это: http://jsfiddle.net/bDTRz/

Я хочу, чтобы все выглядело одинаково, независимо от содержимого (думаю, мне нужна ширина, но я не знаю, где).Я сделал width: 100% для всех таблиц.

Потому что, если вы увидите «Idag», вы увидите, как текст отличается от «старого».Это связано с тем, что значение td в столбцах «old» длиннее (дата + время), чем значение td в «idag» (только время).

Как я могу решить эту проблему?Я знаю, что мне нужно использовать ширину на td´s, я пытался, но все же мне не удалось привести их все в соответствие друг с другом

Я получил это далеко сейчас: http://jsfiddle.net/79jH6/

Но все равно это не выравнивает, как я хочу.

Ответы [ 6 ]

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

Настоящей проблемой здесь является отсутствие понимания того, как рассчитывается ширина столбца.Я страдаю от того же недостатка понимания - установка width для ячеек таблицы часто является неловкой задачей, и я не часто использую таблицы из-за этого.Мне удалось решить вашу конкретную проблему, определив элемент <colgroup> с 3 <col> дочерними элементами, каждый из которых имеет имя класса: 

<colgroup>
    <col class="col1" />
    <col class="col2" />
    <col class="col3" />
</colgroup>

И следующий CSS: 

.col1 { width: 70px; }
.col2 { width: auto; }
.col3 { width: 30px; }

Рабочая демоверсия: http://jsfiddle.net/QrUj9/1/

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

Дайте своим именам классов TDs и используйте свою таблицу стилей для назначения ширины. Таким образом, вам нужно всего лишь изменить вещи в одном месте. 

<td class='col1'>...</td><td class='col2'>...</td>

.col1 {
  width:50px;
}

.col2 {
  width:60px;
}
0 голосов
/ 08 декабря 2010

Я думаю, я понимаю, что вы после - одинаковая ширина столбца?

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

Пример строки таблицы: 

<tr>
<td class="date">21 minuter sedan</td>
<td class="desc">
<a href="profil.php?id=1&amp;wE=2165"><strong>Meg Meg</strong> har skrivit på din vägg.</a></td>
<td>
<a id="1231" data-id="T" class="removeAction">DEL</a>
</td>
</tr>

В приведенном выше коде я установил для вашей ячейки даты класс date, для класса текстовой строки значение desc, и у вас уже есть класс removeAction для ячейки DEL.

Пример CSS: 

#todayNotes{ 
    width: 100%;
}

#yesterdayNotes{
    width: 100%;
}

#olderNotes{
    width: 100%;
}

.cellDate{
    width:150px;
    border: 1px solid #000;
}

.cellNote{
    border: 1px solid red;
}

.cellDel{
    width: 10px;
    border: 1px solid green;
}

Очевидно, отрегулируйте ширину в соответствии с вашим макетом.

0 голосов
/ 08 декабря 2010

Вместо того, чтобы разделять ваш контент на несколько таблиц, вы могли бы вместо этого сделать следующее: 

<table><tbody>
  <tr><th colspan="3">Idag (1) - ta bort alla</th></tr>
  <tr><td>21 minuter sedan</td>...</tr>
</tbody><tbody>
  <tr><th colspan="3">Igår (1) ta bort alla </th></tr>
  <tr><td>kl. 22:17</td>...</tr>
</tbody><tbody>
  <tr><th colspan="3">Old (33) ta bort alla</th></tr>
  ...
</tbody></table>

Я не уверен, что это семантически лучше или хуже, чем у вас, потому что я не могу читать язык(По-шведски?), Но это обеспечит выравнивание контента без фиксированной ширины.

0 голосов
/ 08 декабря 2010

Вы можете сделать это так: 

table tr td.cell:first-child {
    width: 150px;
}

Это сделает ширину равной только для первой ячейки.

0 голосов
/ 08 декабря 2010

в вашем классе, под классом cell, добавьте 

.cell{
    width:150px;
}

Примечание. Это приведет к тому, что все ваши ячейки (

) с именем класса "cell" будут иметь ширину 150 пикселей.

Кроме того, вы можете указать ширину для каждой ячейки прямо в HTML 

<table>
<tr>
<td class="cell" width="150">...</td>
<td class="cell" width="100">...</td>
<td class="cell" width="75">...</td>
<td class="cell" width="50">...</td>
</tr>
</table>
...