table css

[davy_yg]

Hello,

I would like to style my table. I have two different table that I would like to style differently. How to do so?

This is what I try but it does not work:

table, td {
    padding: 5px;
}

 .order table, td{
    width: 5px;
}
</style>

<table class="order" border="1">
  <tr>
    <th>Nama Produk</th>
    <th>Harga</th>  
    <th>Jumlah Pembelian</th>  
    <th>Tipe Produk</th>  
    <th>Total</th>          
  </tr>
  <tr>
    <th><input type="text" name="fname"></th>
    <td><input type="text" name="fname"></td>
    <td><input type="text" name="fname"></td>
    <td><input type="text" name="fname"></td>
    <td><input type="text" name="fname"></td>
  </tr>

</table>

One table order I would like to set the width : 5px.

Please help. Thanks in advance.

[pty]

You want your table and every cell within it to be 5px wide and have 5px padding?

I think you should start by learning how CSS selectors work.

[jstfsklh211]

Tables by default strech to fill up the provided space

Also Google cell-padding is I believe the correct attribute to use

[pty]

The cellpadding attribute has been dropped, the suggested method these days is to use padding: val in css.

[gentlemedia]

pty is right. Your CSS selectors don't make any sense.

You gave that table a class order, so target the td of that table properly like so:

.order td {
    width: 5px;
}

But Like pty said... what the heck do you want to display in a 5px width table cell? :)

[BinaryDigit]

You should keep your styles in the class, then apply that class to your table. Don't style table or td directly. You might want to use a table or td elsewhere in the page that doesn't use that styling (so in that case, create a different class and style).

[Purvi_1]

Hi ! if you want to apply css differently then you have to use custom css class instead of html tag to style your tables

For Example :

HTML

<table class="order">
  <tr>
    <th>Nama Produk</th>
    <th>Harga</th>  
    <th>Jumlah Pembelian</th>  
    <th>Tipe Produk</th>  
    <th>Total</th>          
  </tr>
  <tr>
    <th><input type="text" name="fname"></th>
    <td><input type="text" name="fname"></td>
    <td><input type="text" name="fname"></td>
    <td><input type="text" name="fname"></td>
    <td><input type="text" name="fname"></td>
  </tr>
</table>

</br>

<table class="order2">
  <tr> 
    <th class="demo2">Nama Produk</th>
    <th class="demo2">Harga</th>  
    <th class="demo2">Jumlah Pembelian</th>  
    <th class="demo2">Tipe Produk</th>  
    <th class="demo2">Total</th>          
  </tr>
  <tr>
    <th><input type="text" name="fname"></th>
    <td><input type="text" name="fname"></td>
    <td><input type="text" name="fname"></td>
    <td><input type="text" name="fname"></td>
    <td ><input type="text" name="fname"></td>
  </tr>
</table>

CSS

 .order{
    width: 5px;
    padding: 5px;

 .order2{
    width: 5px;
    padding: 5px;
}

 .order2 .demo2{
   border : 1px solid blue;
}