1

In order to set the width of my columns, I try to do the solution posted here : Setting table column width

Like this :

<table> <colgroup> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> </colgroup> <tr> <th></th> <th>0h-1h</th> <th>1h-2h</th> <th>2h-3h</th> <th>3h-4h</th> <th>4h-5h</th> <th>5h-6h</th> <th>6h-7h</th> <th>7h-8h</th> <th>8h-9h</th> <th>9h-10h</th> <th>10h-11h</th> <th>11h-12h</th> <th>12h-13h</th> <th>13h-14h</th> <th>14h-15h</th> <th>15h-16h</th> <th>16h-17h</th> <th>17h-18h</th> <th>18h-19h</th> <th>19h-20h</th> <th>20h-21h</th> <th>21h-22h</th> <th>22h-23h</th> <th>23h-0h</th> <tr> <tr> <th>Lundi</th> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> </tr> <tr> <th>Mardi</th> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> </tr> <tr> <th>Mercredi</th> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> </tr> <tr> <th>Jeudi</th> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> </tr> <tr> <th>Vendredi</th> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> </tr> <tr> <th>Samedi</th> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> </tr> <tr> <th>Dimanche</th> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> </tr> </table>

Why it doesn't work ?

I just want 25 equals columns (in width), but the parameters seems to have no effects....

On my site, I can't scroll in order to access all the columns (grid in material design), and I want all the table in screen.

Improve this question
7
  • Have you set table {table-layout: fixed} in css? Commented Apr 6, 2017 at 12:25
  • Nothing like this in the style.css file. Is it the default parameters for table ? Commented Apr 6, 2017 at 12:26
  • No, it's not default, it's what you need to have it working Commented Apr 6, 2017 at 12:27
  • I add it, nothing changed. Commented Apr 6, 2017 at 12:29
  • Yes it is html5 (cf. <!DOCTYPE html> ) Commented Apr 6, 2017 at 12:30

3 Answers 3

Reset to default
1

Add width:100% to your inputs solves the problem. See link below: 

input{ width:100%; }
<table> <colgroup> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> <col span="1" style="width: 4%;"> </colgroup> <tr> <th></th> <th>0h-1h</th> <th>1h-2h</th> <th>2h-3h</th> <th>3h-4h</th> <th>4h-5h</th> <th>5h-6h</th> <th>6h-7h</th> <th>7h-8h</th> <th>8h-9h</th> <th>9h-10h</th> <th>10h-11h</th> <th>11h-12h</th> <th>12h-13h</th> <th>13h-14h</th> <th>14h-15h</th> <th>15h-16h</th> <th>16h-17h</th> <th>17h-18h</th> <th>18h-19h</th> <th>19h-20h</th> <th>20h-21h</th> <th>21h-22h</th> <th>22h-23h</th> <th>23h-0h</th> <tr> <th>Lundi</th> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> </tr> <tr> <th>Mardi</th> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> </tr> <tr> <th>Mercredi</th> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> </tr> <tr> <th>Jeudi</th> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> </tr> <tr> <th>Vendredi</th> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> </tr> <tr> <th>Samedi</th> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> </tr> <tr> <th>Dimanche</th> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> <td><input type="number" min="1" step="1"></td> </tr> </table>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Set a specific width in table according to size of your div.

add style as below

 <table style="width:350px; overflow-x:scroll;"> //.... </table>
Improve this answer

Comments

0

Change

<col span="1" style="width: 4%;">

to

<col width="4%">

It will work

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.