w3-table the column unequal width size

Question

I'm using w3css with class w3-table. I set the width for each "td" with width 35px and height 35px. I found out that the width still changes according to the text.

Here is my code:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<style>
    .box{
        width: 35px;
        height: 35px;
        border: 1px solid black;
    }

    .yellow {
        background-color: yellow !important;
    }
</style>
<body>

<table class="w3-table">
   <tbody>
      <tr>
         <td class="box yellow">20</td>
         <td class="box yellow">1000</td>
         <td class="box yellow">2</td>
         <td class="box yellow">10</td>
         <td class="box yellow">1000</td>
      </tr>
      <tr>
         <td class="box yellow">&nbsp;</td>
         <td class="box yellow">&nbsp;</td>
         <td class="box yellow">&nbsp;</td>
         <td class="box yellow">&nbsp;</td>
         <td class="box yellow">&nbsp;</td>
      </tr>
   </tbody>
</table>

</body>
</html>

Whereby I attach the result output as below:

There have A, B, C, D, E column labelled for easy me to explain. A with text 20 B with text 1000 C with text 2 D with text 10 E with text 1000

A and D column have two digit text ie 20 and 10 respectively. I expected A and D have the same width but the output result showed A width slightly bigger than D. I can conclude that the first column always slight bigger compare to other columns. I also notice that the column width change according to the number of text. Example 1000 in column B and E width bigger 2 in column C.

May I know how to make sure the column width able to maintain a fixed size ratio in each column while being able to maintain a responsive web page?

I appreciate if you can give me some hints on this.

Your idea is a mistake. Why you give a fixed 35px width for each column, when your table has 100% width? This is the cause of your problem. Use percents and min/max-width property when needed. — plvice, Feb 21 '17 at 09:55
I appreciate if you can show me a correct idea with altered source code. Thank you. — HenryLoke, Feb 21 '17 at 11:26

score 2 · Accepted Answer · answered Feb 21 '17 at 10:04

Do this change

.yellow {
    background-color: yellow !important;
    max-width:35px;
}

This will make the width equal for all the columns even it has large value. Here is the running example:

.box{
     width: 35px;
     height: 35px;
     border: 1px solid black;
 }
 .yellow {
     background-color: yellow !important;
     max-width:35px;
 }

    <!DOCTYPE html>
    <html>
    <head>
        <title>W3.CSS</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
    </head>

    <body>
    <table class="w3-table">
       <tbody>
          <tr>
             <td class="box yellow">20</td>
             <td class="box yellow">1000</td>
             <td class="box yellow">289834595</td>
             <td class="box yellow">10</td>
             <td class="box yellow">1000</td>
          </tr>
          <tr>
             <td class="box yellow">&nbsp;</td>
             <td class="box yellow">&nbsp;</td>
             <td class="box yellow">&nbsp;</td>
             <td class="box yellow">&nbsp;</td>
             <td class="box yellow">&nbsp;</td>
          </tr>
       </tbody>
    </table>
    </body>
    </html>

Thank you for the reply. It fix the width problem. By the way, is it possible to fix the first column padding left too? — HenryLoke, Feb 21 '17 at 11:23
Can you be more specific, couldn't get your question. @HenryLoke — Subash Matheswaran, Feb 21 '17 at 11:32
By the way @HenryLoke if the answer fixed your problem, you can mark it as accepted using the tick. — Subash Matheswaran, Feb 22 '17 at 05:12

score 0 · Answer 2 · answered Feb 21 '17 at 09:49

0

Add this in your css file

table{
  table-layout: fixed;
  width: 300px;

}

here's the link http://codepen.io/myco27/pen/oBKWYq

answered Feb 21 '17 at 09:49

Myco Claro

475
2
14

score 0 · Answer 3 · answered Feb 21 '17 at 09:49

0

You can try to change css of box class from 35px to 20%

.box{
   width: 20%;
   height: 35px;
   border: 1px solid black;
}

answered Feb 21 '17 at 09:49

PHP Geek

3,949
1
16
32

Thank you for reply. The number of column will change either 3, 4, or 5 columns. We cant fix 20% if 5 row and become 25% if 4 row and etc. – HenryLoke Feb 21 '17 at 11:31
if you have dynamic columns. Just try to add following style .w3-table { table-layout: fixed; } – PHP Geek Feb 21 '17 at 11:46

w3-table the column unequal width size

3 Answers3