CODEWITHSUNDEEP
htmlcss
user12412721
user12412721

Reputation:

html table reset all default css

I am working with html table i need reset all default table style any idea

my table 

<table border=1 width=100>
  <tr>
    <th>area 1</th>
    <th>area 2</th>
  </tr>
  <tr>
    <td>area</td>
    <td>area</td>
  </tr>
  <tr>
    <td>area</td>
    <td>area</td>
  </tr>
  <tr>
       <td>area</td>
    <td>area</td>

  </tr>
  <tr>
    <td>area</td>
    <td>area</td>
  </tr>
  <tr>
    <td>area</td>
    <td>area</td>
  </tr>
</table>

main problem delete default padding margin

Upvotes: 2

Views: 4588

Answers (4)

Skylar
Skylar

Reputation: 924

If you just want to get rid of the space between cells, use this rule:

border-collapse: collapse;

Here's a snippet showing implementing this with your HTML.

table {
  border-collapse: collapse;
}
<table border=1 width=100>
  <tr>
    <th>area 1</th>
    <th>area 2</th>
  </tr>
  <tr>
    <td>area</td>
    <td>area</td>
  </tr>
  <tr>
    <td>area</td>
    <td>area</td>
  </tr>
  <tr>
    <td>area</td>
    <td>area</td>

  </tr>
  <tr>
    <td>area</td>
    <td>area</td>
  </tr>
  <tr>
    <td>area</td>
    <td>area</td>
  </tr>
</table>

Upvotes: 0

Skylar
Skylar

Reputation: 924

To remove all default styling of any element, use the all property.

For example, a table could have styling removed using the following CSS.

table, thead, tbody, tfoot, th, td, tr {
  all: unset;
}

You can find browser support information here.

table, thead, tbody, tfoot, th, td, tr {
  all: initial;
}
<table border=1 width=100>
  <tr>
    <th>area 1</th>
    <th>area 2</th>
  </tr>
  <tr>
    <td>area</td>
    <td>area</td>
  </tr>
  <tr>
    <td>area</td>
    <td>area</td>
  </tr>
  <tr>
    <td>area</td>
    <td>area</td>

  </tr>
  <tr>
    <td>area</td>
    <td>area</td>
  </tr>
  <tr>
    <td>area</td>
    <td>area</td>
  </tr>
</table>

Upvotes: 1

errorau
errorau

Reputation: 2334

You can use as below codes, I override all table tags with css

https://jsfiddle.net/nkc9ye5h/

 table,
 thead,
 tbody,
 tfoot,
 tr,
 th,
 td {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    border-collapse: inherit;
    border-spacing: 0;
    border-color: inherit;
    vertical-align: inherit;
    text-align: left;
    font-weight: inherit;
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0;
}
th, td {
    display: inline;
}

Upvotes: -1

Angela Amarapala
Angela Amarapala

Reputation: 1052

Try using this,

table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Upvotes: 1

Related Questions