How to set 50% height for table cells for WebKit (Chrome, Safari)_问答_开发者

How to set 50% height for table cells for WebKit (Chrome, Safari)

开发者 https://www.devze.com 2022-12-10 13:50 出处：网络

Look at this code: <html> <body> <table border=\"1px\"> <tr> <th align=\"center\" width=\"70px\">Name</th>

相关专题：css webkit

Look at this code:

<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).
            &开发者_开发问答lt;/td>
        </tr>
        <tr>
            <td>Schedule:</td>
            <td>28.10.2009 13:41:37</td>
        </tr>
    </table>
</body>

Height of strings that contains Start and Schedule are needed to be equal. In IE, Firefox they have the same height by default. Is it possible to implement the same for WebKit using CSS? How? (Height hardcoding is forbidden, Message size is generated dynamically.)

What's wrong with height:50%? (The surrounding table, body and HTML then need height: 100% as well.)

This will do what you want:

<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>

Some browsers would take height=50% to mean that the height should be 50% of the table as a whole, so I set the <td> heights to 47% each and the <th> height to 6%. There is still a bug in all popular browsers except for IE (surprisingly), where the table will not resize normally. Specifically, they will make the bottom of the two 2-rowspan'ed cells taller and the top one shorter as the browser window's width decreases. You should be able to play around with the numbers, though, and make them fit your needs. If not, you might consider looking into divs rather than tables.