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 td
s 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
Google Chrome Showing Black Border on Focus State for Button User Agent Styles
Full Body Background with Twitter Bootstrap
Flex-Wrap Not Working as Expected in Safari
Including Margin for Width and Height
Differences and Similarities Between Svg and CSS3 Animations
Change Background Color Every 30S (Fade Transition)
Left Aligned and Centered Grid with Flexbox
Transparent Strikethrought on Text
CSS Selectors - Difference Between and When to Use ">", "+" or " "
Angular2 Material Dialog CSS, Dialog Size
How to Centre Absolutely Positioned Content of Unknown Width
Alternating Row Colors in Bootstrap 3 - No Table
Controller Specific Stylesheets in Rails 3: Inheritence
How Bad Is It in Practice to Over-Nest Selectors in SASS/Scss
How to Select a Web Element by Text with Selenium Webdriver, Java