Why Tr Not Taking Style

Why TR not taking style?

Add:

table
{
border-collapse: collapse;
}

Otherwise tr creates no single block.

Simple example:

table{  border: 5px solid #900;  background: #fff;}tr{  border: 5px solid #090;}td{  background: #ccc;  padding: 5px 0;}
table + table{ border-collapse: collapse;}
<table>  <tr>    <td>def</td>    <td>ault</td>  </tr></table><table>  <tr>    <td>coll</td>    <td>apse</td>  </tr></table>

Add inline style to Table TR tag, not working

You need to set font-size to <td> because font-size does not go in the tr tag. check this link:

style attribute to TR and TD

Border around tr element doesn't show?

Add this to the stylesheet:

table {
border-collapse: collapse;
}

JSFiddle.

The reason why it behaves this way is actually described pretty well in the specification:

There are two distinct models for setting borders on table cells in
CSS. One is most suitable for so-called separated borders around
individual cells, the other is suitable for borders that are
continuous from one end of the table to the other.

... and later, for collapse setting:

In the collapsing border model, it is possible to specify borders that
surround all or part of a cell, row, row group, column, and column
group.

padding and border are not working with tr tag

Since this is a table, you'd want to give the table border spacing:

table { 
border-spacing:10px 10px;
}

OR

Give the table heads and table rows the padding:

tr.row th, tr.row td {
padding: 10px;
}

Style not working on this table

Something in your CSS is setting the border attribute on your tds or the border-collapse attribute on table. Without a paste of your CSS and HTML somewhere, it's difficult to say for sure where the problem is.

If you'd rather dodge the CSS file, you can set CSS inline. Try some of these:

<table style="border-collapse: collapse !important; border-spacing: 0 !important;">

or

<td style="border: 0 !important;">

The !important keyword will over-ride anything set in an external stylesheet.

Table Border is Not working : Table Row (tr) Border is not appear using css

You need to add border to td for example:

<style>
table td{ padding:20px; border:1px solid #F00 ; }
</style>

DEMO

Or you can add border to the table:
like this:

table{ border:1px solid #F00 ;  }
table td{ padding:20px; }

DEMO2

If you want only row border effect you can try this:

table td{
border-top: 1px solid red;
border-bottom: 1px solid red;
padding:20px;
}

table{ border:1px solid #F00 ; }

DEMO3

CSS styles does not get applied

You're problem is with specificity and order - as you have put the light blue on the td, you need to override that with the yellow on the td too.

You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter.

One final thing - remove display:block from the table, otherwise you will break the layout of the table.

.table {  font-family: sans-serif;  width: auto;  overflow: auto;  border: 1;  width:100%;  /* remove display block from here otherwise your table layout will break */}

/*put this first*/.table td { background-color: lightblue;}

/*override with this*/.head td { background-color: yellow;}
<html>
<head> <link rel="stylesheet" type="text/css" href="new-style.css"> <meta charset="UTF-8"></head>
<body id="body"> <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head"> <td class="head">Name</td> <td class="head">Type</td> </tr>
<tr id="initial-row"> <td width=200> text here</td> <td width=200> text here </td> </tr>
<tr id="second-row"> <td width=200> text here </td> <td width=200>text here </td> </tr> </table></body>
</html>

Border not showing under tr element in a HTML table

Try adding border-collapse:collapse; to your table rules:

.cart_table {
width:100%;
border-collapse:collapse;
}

jsFiddle example



Related Topics



Leave a reply



Submit