Указание ширины и выравнивания текста столбца - PullRequest
Новая
       4

Указание ширины и выравнивания текста столбца

4 голосов
/ 15 июня 2010

Можно ли указать ширину столбца таблицы в процентах с помощью css?Также возможно ли указать выравнивание текста для определенного столбца?

Например, у меня есть таблица с 3 столбцамиЯ хотел бы сказать 

col1.width = 20%
col2.width = 40%
col3.width = 40%

col1.text-align = left;
col2.text-align = right;
col3.text-align = center;

Ответы [ 2 ]

1 голос
/ 16 июня 2010

По первому вопросу: создайте классы, которые вы назначаете каждому col умн.Довольно просто.

Выравнивание текста немного сложнее, поскольку вы можете назначить только несколько свойств столбцам таблицы в целом.В этом случае одним из решений будет использование псевдокласса nth-child, но это особенность CSS 3, которая не работает ни в одной из текущих версий Internet Explorer.Поскольку этот ответ предлагает, вы также можете использовать комбинатор + для стилизации соседних столбцов.Это функция CSS 2.1 , поддерживаемая IE> = 7 . 

<!DOCTYPE html>
<head>
<meta charset=UTF-8>
<title>Column styling</title>
<style>
table {
    table-layout: fixed;
    width: 1000px;
}

.firstColumn {
    width: 20%;
    background: #ccc;
}

.otherColumns {
    width: 40%;
    background: #eee;
}

td       { text-align: left }
td+td    { text-align: right }
td+td+td { text-align: center }
</style>
</head>
<body>
<table>
    <col class="firstColumn">
    <col class="otherColumns">
    <col class="otherColumns">
    <tr>
        <td>bla</td>
        <td>bla</td>
        <td>bla</td>
    </tr>
    <tr>
        <td>bla</td>
        <td>bla</td>
        <td>bla</td>
    </tr>
    <tr>
        <td>bla</td>
        <td>bla</td>
        <td>bla</td>
    </tr>
</table>
</body>
</html>
0 голосов
/ 15 июня 2010

Вы можете сделать это, но ваша ширина <td> относительно родительского контейнера на данный момент.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...