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.

Recommended Answers

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.

Jump to Post

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).

Jump to Post

All 6 Replies

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.

Tables by default strech to fill up the provided space

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

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

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? :)

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).

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;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.