How to change table width using css

Question

Html

<table style='width: 150px; border: 1px solid black;'>


 <tr>
    <td>blablabla</td>
      <td>blablabla</td>
  </tr>
     <tr>
    <td>abcd</td>
      <td>abcd</td>
  </tr>
</table>

I want to change the table width to 600px. I couldnt figure out the selector for changing width.
Please help , i am learning css.

Amit singh · Accepted Answer · 2015-09-22 07:50:50Z

1

Just do like this

HTML

<table style='width: 150px; border: 1px solid black;'>


 <tr>
    <td>blablabla</td>
      <td>blablabla</td>
  </tr>
     <tr>
    <td>abcd</td>
      <td>abcd</td>
  </tr>
</table>

CSS

table {
  width:600px!important;
  border:1px solid black;
}

edited Sep 22, 2015 at 7:50

answered Sep 22, 2015 at 7:45

Amit singh

2,0661 gold badge15 silver badges19 bronze badges

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

2 Comments

Help Over a year ago

Thank You ! I wasnt using !important It was so easy , i dont know why people downvote it ! :p

Amit singh Over a year ago

if necessary than only use !important if not than don't it is bad practice

neuhaus · Accepted Answer · 2015-09-22 07:43:36Z

1

Change the width value in the style attribute.

 <table style="width: 600px;">

yields a table that is 600px wide.

answered Sep 22, 2015 at 7:43

neuhaus

4,1741 gold badge13 silver badges29 bronze badges

2 Comments

neuhaus Over a year ago

You want to change the CSS width using JavaScript? Why didn't your write that in your question?

Help Over a year ago

Have i mentioned anywhere using javascript? i clearly wrote using css. btw i got it :)

Mukul Kant · Accepted Answer · 2015-09-22 07:49:58Z

1

You should use like this -

table [style]{width:600px !important}

answered Sep 22, 2015 at 7:49

Mukul Kant

7,1705 gold badges44 silver badges57 bronze badges

Comments

CodeRomeos · Accepted Answer · 2015-09-22 07:47:52Z

0

It is specified inline right there in your code.

<table style='width: 150px; border: 1px solid black;'>

change this

<table style='width: 600px; border: 1px solid black;'>

Alternatively

Use a class in your table and use the selector in your css file.

<table class="tbl" style='width: 150px; border: 1px solid black;'>

CSS

.tbl{width:600px!important} /*!important override inline css 150px*/

If you can remove the inline css used in table, you need not to use !important like this-

<table class='tbl'>

CSS

.tbl{width:600px}

edited Sep 22, 2015 at 7:47

answered Sep 22, 2015 at 7:41

CodeRomeos

2,4481 gold badge12 silver badges20 bronze badges

2 Comments

Help Over a year ago

Ops , No i dont want to change it from html for some reason , can i change it through css?

Help Over a year ago

Hey Thank you. Class thing worked for me :) But using table {width: 600px !important;} also worked :) Thanks for your help

IsaiahM · Accepted Answer · 2022-09-08 19:33:23Z

0

To those who width !important didnt work, try also changing min-width and setting it to !important.

.myCssTable { 
width: 80% !important;
min-width: 80% !important;
}

answered Sep 8, 2022 at 19:33

IsaiahM

133 bronze badges

Collectives™ on Stack Overflow

How to change table width using css

5 Answers 5

2 Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related