Как получить элементы в «столбце» для выравнивания по правому краю? - PullRequest
Новая
       0

Как получить элементы в «столбце» для выравнивания по правому краю?

4 голосов
/ 10 января 2011

У меня есть простая таблица из двух столбцов; Я хочу, чтобы выровнять данные в первом столбце справа и иметь возможность стилизовать два элемента по отдельности. Возможно, стол - не лучшее решение, но я не знаю, что еще попробовать. Я пробовал с группами столбцов, но это не работает. Даже когда я пытаюсь применить text-align: right к элементу 'label'. 

<table>
<colgroup>
<col class="label" />
<col class="price" />
</colgroup>
<tr>
<td><label>Subtotal:</label></td>
<td>$135.00</td>
</tr>
<tr>
<td><label>Taxes:</label></td>
<td>$11.23</td>
</tr>
</table>

Ответы [ 6 ]

4 голосов
/ 10 января 2011

Поскольку вы, вероятно, говорите о заголовочных ячейках, я бы выбрал другой подход:

2 голосов
/ 10 января 2011

Дайте идентификатор или класс вашим тэгам HTML. например .. Затем используйте CSS, чтобы придать им стиль, который вы хотите. 

tr#cell1{
text-align:right;

}

Используйте это для каждой строки, которую вы хотите выровнять отдельно

1 голос
/ 10 января 2011

Метка не выравнивается по правому краю, потому что это встроенный элемент.Если вы дадите ему display:block или display:inline-block, он заполнит всю ячейку таблицы и применит ваше правое выравнивание: 

label {
 display: block;
 text-align: right;
}
0 голосов
/ 18 октября 2012

Если вы не хотите превращать элемент td в th, вы можете сделать это: 

<style type="text/css">
  table td:first-child { text-align: right; }
</style>

<table>
  <tr>
    <td>Right aligned</td>
    <td>Left aligned</td>
  </tr>
</table>

Он хорошо работает с Firefox, Chrome и IE 8 (возможно, IE 7 тоже).

0 голосов
/ 10 января 2011

Попробуйте присвоить ячейке таблицы класс 

<td class="sub">…</td>

, а затем стилизовать их с помощью CSS: 

table td {
  // style for all except .sub
}

table td.sub {
  text-align: right;
  // and other styles that differ from rest
}
0 голосов
/ 10 января 2011

Это должно сделать! 

<html>
<head>
    <style>
    .one { width:100px; border:1px solid red; }
    .one label { display:block; width:100%; text-align:right; }
    .two { width:150px; border:1px solid green; }
    </style>
</head>

<body>
<table>
  <tr>
   <td class="one"><label>one</label></td>
   <td class="two">two</td>
  </tr>
</table>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...