Table with cell width and height in percentage

Question

Table with cell width and height in percentage

1.7k Views Asked by newbieforever At 19 October 2024 at 23:57

I need this for a simple one-time project and would like to avoid an extended studying of all these newer methods ...

Am I using CSS correctly in the following code?
My attempt to have different cell widths in the second row is not working. How this must be done to work?

<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <style>
        table {
            height: 100%;
            width: 100%;
        }

        tr.row1 {
            height: 40%;
        }

        tr.row2 {
            height: 5%;
        }

        tr.row3 {
            height: 55%;
        }

        td.colS {
            width: 40%;
        }

        td.colW {
            width: 60%;
        }
    </style>
</head>

<body>
    <table>
        <tbody>
            <tr class="row1">
                <td class="colS" style="background-color:red">1</td>
                <td class="colW" style="background-color:green">2</td>
            </tr>
            <tr class="row2">
                <td class="colW" style="background-color:green">3</td>
                <td class="colS" style="background-color:red">4</td>
            </tr>
            <tr class="row3">
                <td class="colS" style="background-color:red">5</td>
                <td class="colW" style="background-color:green">6</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Original Q&A

There are 2 best solutions below

**bulldozer** · Answer 1

Add

table-layout: fixed

to CSS in to

table   {height: 100%; width: 100%;}

like this:

table   {height: 100%; width: 100%; table-layout: fixed;}

   table   {height: 100%; width: 100%; table-layout: fixed;}
   tr.row1 {height: 40%}
   tr.row2 {height:  5%}
   tr.row3 {height: 55%}
   td.colS {width:  40%}
   td.colW {width:  60%}

<table>
<tbody>
<tr class="row1">
<td class="colS" style="background-color:red"  >1</td>
<td class="colW" style="background-color:green">2</td>
</tr>

<tr class="row2">
<td class="colW" style="background-color:green">3</td>
<td class="colS" style="background-color:red"  >4</td>
</tr>

<tr class="row3">
<td class="colS" style="background-color:red"  >5</td>
<td class="colW" style="background-color:green">6</td>
</tr>
  
</tbody>
</table>

**Joshua Duxbury** · Answer 2

You have to choose a width for the column not individual cells - tables don't work that way. For instance if you wanted the second column to have a width you could use the following code

    <html>

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">

<style>
   table   {height: 100%;width: 100%}
   tr td:nth-child(2) {width:  80%; }
</style>
</head>

<body>


<table>
<tbody>

<tr class="row1">
<td class="colS" style="background-color:red"  >1</td>

<td class="colW" style="background-color:green">2</td>

</tr>

<tr class="row2">
<td class="colW" style="background-color:green">3</td>

<td class="colS" style="background-color:red"  >4</td>

</tr>

<tr class="row3">
<td class="colS" style="background-color:red"  >5</td>

<td class="colW" style="background-color:green">6</td>

</tr>


</tbody>
</table>


</body>

</html>

Table with cell width and height in percentage

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in CSS-TABLES

Trending Questions

Popular # Hahtags

Popular Questions