CODEWITHSUNDEEP
htmlcss
Rahul SK
Rahul SK

Reputation: 432

html css for td cells border

I have a html table with id 't01'

I have a seperate css for the table

I am trying to have table border between the cells. How do i do it? I can get borders around the table but not in between in cells.

<!DOCTYPE html>
<html>
    <head>
    <title>Bigwin Daily Revenue Report </title>
    <style> 
        #t01 {
            width: 100%;
            background-color: #f1f1c1;
            border: 1px solid black;
             padding: 10px;
        }
    </style>
</head>
<body>
    <table id="t01">
    <tr>
        <td></td>
        <td><b>January</b></td>
        <td><b>February</b></td>
        <td><b>March</b></td>
        <td><b>April</b></td>
        <td><b>May</b></td>
        <td><b>June</b></td>
        <td><b>July</b></td>
        <td><b>August</b></td>
        <td><b>September</b></td>
        <td><b>October</b></td>
        <td><b>November</b></td>
        <td><b> Total</b></td>
     </tr>
     <tr>
        <td>BYH  (22888)</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>66.0</td>
     </tr>          
     </table>
   </body>
</html>

Upvotes: 1

Views: 2869

Answers (4)

Guest
Guest

Reputation: 11

Its actually quite easy! table{ border-collapse: collapse; border:gray 1px solid; } td{ border:gray 1px solid; } th{ border:gray 1px solid; }

the BORDER-COLLAPSE property is what does it!

Upvotes: 0

Julio Cachay
Julio Cachay

Reputation: 830

You could add a descendant selector for your elements within the table with Id t01, like this:

<!DOCTYPE html>
<html>
    <head>
    <title>Bigwin Daily Revenue Report </title>
    <style> 
        #t01 {
            width: 100%;
            background-color: #f1f1c1;
            border: 1px solid black;
             padding: 10px;
        }

        #t01 td {
            border-right:1px solid black;
        }
    </style>
</head>
<body>
    <table id="t01">
    <tr>
        <td></td>
        <td><b>January</b></td>
        <td><b>February</b></td>
        <td><b>March</b></td>
        <td><b>April</b></td>
        <td><b>May</b></td>
        <td><b>June</b></td>
        <td><b>July</b></td>
        <td><b>August</b></td>
        <td><b>September</b></td>
        <td><b>October</b></td>
        <td><b>November</b></td>
        <td><b> Total</b></td>
     </tr>
     <tr>
        <td>BYH  (22888)</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>66.0</td>
     </tr>          
     </table>
   </body>
</html>

Upvotes: 1

corn on the cob
corn on the cob

Reputation: 2302

We can use the descendant selector to do this. The example below adds borders to all tds inside our table. I have also added border-collapse to collapse all the margins.

#t01 {
  width: 100%;
  background-color: #f1f1c1;
  border-collapse: collapse;
}
#t01 td {
  padding: 10px;
  border: 1px solid black;
}
<table id="t01">
  <tr>
    <td></td>
    <td><b>January</b></td>
    <td><b>February</b></td>
    <td><b>March</b></td>
    <td><b>April</b></td>
    <td><b>May</b></td>
    <td><b>June</b></td>
    <td><b>July</b></td>
    <td><b>August</b></td>
    <td><b>September</b></td>
    <td><b>October</b></td>
    <td><b>November</b></td>
    <td><b> Total</b></td>
  </tr>
  <tr>
    <td>BYH (22888)</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>66.0</td>
  </tr>
</table>

Upvotes: 0

Matthew Dangle
Matthew Dangle

Reputation: 416

You must target all elements of the table. The following snippet should get you started.

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

See CSS Table by w3schools to learn more: http://w3schools.com/css/css_table.asp

Upvotes: 2

Related Questions