Как установить 50% высоты для ячеек таблицы для WebKit (Chrome, Safari) - PullRequest
Новая
       7

Как установить 50% высоты для ячеек таблицы для WebKit (Chrome, Safari)

0 голосов
/ 29 октября 2009

Посмотрите на этот код: 

<html>
<body>
    <table border="1px">
        <tr>
            <th align="center" width="70px">Name</th>
            <th align="center" width="70px">State</th>
            <th  align="center" width="70px">Enabled</th>
            <th colspan="2">Date &amp; Time</th>
            <th>Message</th>
        </tr>
        <tr>
            <td rowspan="2">
                <span>Import</span>
            </td>
            <td rowspan="2" align="center">
                Idle
            </td>
            <td rowspan="2" align="center">
                Yes
            </td>
            <td style="width:150px;">Start:</td>
            <td style="width:150px">28.10.2009 00:00:00</td>
            <td rowspan="2">
                The job succeeded.  The Job was invoked by User sa.  The last step to run was step 1 (Updating).The job succeeded.  The Job was invoked by User sa.  The last step to run was step 1 (Updating).The job succeeded.  The Job was invoked by User sa.  The last step to run was step 1 (Updating).The job succeeded.  The Job was invoked by User sa.  The last step to run was step 1 (Updating).
            </td>
        </tr>
        <tr>
            <td>Schedule:</td>
            <td>28.10.2009 13:41:37</td>
        </tr>
    </table>
</body>

Высота строк, содержащих Start и Schedule, должна быть одинаковой. В IE Firefox они имеют одинаковую высоту по умолчанию. Можно ли реализовать то же самое для WebKit с использованием CSS? Как? (Жесткое кодирование высоты запрещено, размер сообщения генерируется динамически.)

Ответы [ 2 ]

1 голос
/ 29 октября 2009

Что не так с высотой: 50%? (Затем окружающая таблица, тело и HTML также должны иметь высоту: 100%.)

0 голосов
/ 30 октября 2009

Это будет делать то, что вы хотите: 

<html>
<body>

<table border="1" style="height:100%; width:100%;">
  <tr style="height:6%;">
    <th align="center" style="width:70px;">Name</th>
    <th align="center" style="width:70px;">State</th>
    <th align="center" style="width:70px;">Enabled</th>
    <th align="center" colspan=2>Date &amp; Time</th>
    <th align="center" style="width:70px;">Message</th>
  </tr>
  <tr>
    <td align="center" rowspan=2>Import</td>
    <td align="center" rowspan=2>Idle</td>
    <td align="center" rowspan=2>Yes</td>
    <td style="height:47%; width:150px;">Start:</td>
    <td style="height:47%; width:150px;">28.10.2009 00:00:00</td>
    <td rowspan=2 style="height:100%; wifth:70px;">The job succeeded. The Job was invoked by User sa. The last step to run was step 1 (Updating).The job succeeded. The Job was invoked by User sa. The last step to run was step 1 (Updating).The job succeeded. The Job was invoked by User sa. The last step to run was step 1 (Updating).The job succeeded. The Job was invoked by User sa. The last step to run was step 1 (Updating).
    </td>
  </tr>
  <tr>
    <td>Schedule:</td>
    <td>28.10.2009 13:41:37</td>
  </tr>
</table>

</body>
</html>

В некоторых браузерах значение height=50% может означать, что высота должна составлять 50% от всей таблицы, поэтому я установил для высоты <td> значение 47% для каждого и для высоты <th> значение 6%. Все еще есть ошибка во всех популярных браузерах, кроме IE (что удивительно), когда размер таблицы не будет меняться нормально. В частности, они сделают нижнюю из двух 2- rowspan 'ed ячеек выше, а верхнюю - короче по мере уменьшения ширины окна браузера. Вы должны быть в состоянии поиграть с числами, и сделать их соответствовать вашим потребностям. Если нет, вы можете рассмотреть div с, а не table с.

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

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

...