How to reduce table border thickness?

Question

I am drawing one table with border=1 but it looks quite prominent as I am enclosing one image inside it so I want to make it thinner for better look and feel.

<table border=1 cellpadding=50 cellspacing=0><tr><td></td></tr></table>

How can I reduce border thickness?

score 2 · Accepted Answer · edited Aug 16 '23 at 22:11

2

You can style it like this:

td,
th {
  border: .1px solid black;
}

<table border=1 cellpadding=50 cellspacing=0>
  <tr>
    <td></td>
  </tr>
</table>

(JSFiddle demo)

edited Aug 16 '23 at 22:11

Cristian Ciupitu

20,270
7
50
76

answered Jun 16 '15 at 09:13

Rahul Tripathi

168,305
31
280
331

score 0 · Answer 2 · edited Aug 16 '23 at 22:42

This sample code may help you,

table {
  border: 5px solid blue;
}

caption {
  color: wheat;
}

th {
  border: 2px solid yellow;
  background-color: grey;
}

td {
  border: 3px solid red;
  background-color: green;
}

<table border=1 cellpadding=50 cellspacing=0>
  <caption>TABLE</caption>
  <thead>
    <tr>
      <th>H1</th>
      <th>H2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">FOOTER</td>
    </tr>
  </tfoot>
</table>

How to reduce table border thickness?

2 Answers2