Форматирование таблицы CSS в таблицу HTML - PullRequest
Новая
       5

Форматирование таблицы CSS в таблицу HTML

0 голосов
/ 25 мая 2010

Я пытаюсь обеспечить форматирование CSS для двух таблиц HTML, но не могу. Я настраиваю веб-страницу на HTML и CSS (с CSS на внешнем листе), и макет сайта зависит от таблиц.

Есть 2 стола, один для головы и другой для тела. Они устанавливаются, в то время как содержимое располагается в одном среднем столбце шириной 60%, по одному столбцу на каждой стороне центра с шириной 20% каждый вместе с другим форматированием таблицы.

Мой вопрос - как я могу отформатировать таблицы в CSS? Я успешно отформатировал их в HTML, но это не сработает. Это код CSS для таблиц - каждая таблица имеет макет таблицы идентификаторов: 

#layouttable{border:0px;width:100%;}
#layouttable td{width:20%;vertical-align:top;}
#layouttable td{width:60%;vertical-align:top;background-color:#E8E8E8;}
#layouttable td{width:20%;vertical-align:top;}

Каждая из таблиц в html-документе содержит в своем порядке следующие элементы (содержимое которых не показано): 

<table id="layouttable"><tr><td></td><td></td><td></td></tr></table>

Кто-нибудь знает, почему этот CSS не работает, или может написать какой-нибудь код, чтобы это исправить? Если требуется дальнейшее объяснение, пожалуйста, спросите.

Ответы [ 2 ]

4 голосов
/ 25 мая 2010

Метод Khnle работал нормально для меня, попробуйте поместить некоторый контент в <td></td>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    #header { width:100%; background-color:#CCCCCC; text-align:center;}
    #layouttable{border:0px;width:100%; text-align:center;}
    #layouttable td.col1{width:20%;vertical-align:top;}
    #layouttable td.col2{width:60%;vertical-align:top;background-color:#E8E8E8;}
    #layouttable td.col3{width:20%;vertical-align:top;}
</style>
</head>

<body>
<table id="header">
    <tr>
        <td>This is the header</td>
    </tr>
</table>
<table id="layouttable">
    <tr>
        <td class='col1'>20% column</td>
        <td class='col2'>60% column</td>
        <td class='col3'>20% column</td>
    </tr>
</table>
</body>
</html>

Если вы не хотите что-то совершенно другое! Надеюсь, это поможет!

2 голосов
/ 25 мая 2010

Попробуйте следующее: 

<table id="layouttable">
    <tr>
        <td class='col1'></td>
        <td class='col2'></td>
        <td class='col3'></td>
    </tr>
</table>

#layouttable{border:0px;width:100%;}
#layouttable td.col1{width:20%;vertical-align:top;}
#layouttable td.col2{width:60%;vertical-align:top;background-color:#E8E8E8;}
#layouttable td.col3{width:20%;vertical-align:top;}

То, что у тебя было раньше, не сработало, потому что они перезаписали друг друга.

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

Похожие темы

...