I would like a table where some cells have broken borders and others have continuous borders. For example, here is the html for a four column, 12 row table:
<table>
<thead>
<tr class="header">
<th id="blank_cell"></th> <!-- blank -->
<th>first_c</th>
<th>second_c</th>
<th>third_c</th>
</tr>
</thead>
<tbody>
<tr>
<th>row one</th>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<th>row two</th>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<th>row three</th>
<td>3,1,</td>
<td>3,2</td>
<td>3,3</td>
</tr>
<tr>
<th>row four</th>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
</tr>
<tr>
<th>row five</th>
<td>5,1</td>
<td>5,2</td>
<td>5,3</td>
</tr>
<tr>
<th>row six</th>
<td>6,1</td>
<td>6,2</td>
<td>6,3</td>
</tr>
<tr>
<th>row seven</th>
<td>7,1</td>
<td>7,2</td>
<td>7,3</td>
</tr>
<tr>
<th>row eight</th>
<td>8,1</td>
<td>8,2</td>
<td>8,3</td>
</tr>
<tr>
<th>row nine</th>
<td>9,1</td>
<td>9,2</td>
<td>9,3</td>
</tr>
<tr>
<th>row ten</th>
<td>10,1</td>
<td>10,2</td>
<td>10,3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>End</th>
<td>e_one</td>
<td>e_two</td>
<td>e_three</td>
</tr>
</tfoot>
</table>
I would like the thead cells to have a continuous border along the bottom (except for the first, blank cell), whilst maintaining a broken border on the other rows.
Here is some CSS, it creates broken borders along the bottom of the rows (except the leftmost cells of each row).
body {
font-family:Arial,Verdana,sans-serif;
color:#111111;
}
table {
width:450px;
}
td,th {
padding:7px 10px 10px 10px;
}
thead th {
border-bottom:4px solid #111111;
}
tbody th {
border-left:2px solid #111111;
border-right:4px solid #111111;
}
tbody td {
border-bottom:2px solid #111111;
}
th {
text-transform:uppercase;
letter-spacing:0.1em;
word-spacing:0.3em;
text-align:left;
}
#blank_cell {
border:none;
}
tr:hover {
background-color:#c3e6e5;
}
I want the very first row - the header row - to have a continuous, unbroken line, whereas I want the others to remain as they are (i.e. broken). All I can find, so far, is styling that is applied to the whole table: for example, I can't seem to collapse borders or set zero spacing on just the cells in the thead part of the table. So if I make the borders continuous, it is applied to the entire table.
You'll probably have to put it in two different tables, the first containing the content of your tr.header, with cellspacing="0" and the second with the default value. However, that means that you'll have to add CSS to keep the width's consistent, and that may be a problem depending on what you are putting into the table(s). If that isn't a problem, here is the code with all columns set to 25% width:
(and a JSFiddle)
<body>
<table cellspacing="0">
<thead>
<tr class="header">
<th id="blank_cell"></th> <!-- blank -->
<th>first_c</th>
<th>second_c</th>
<th>third_c</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<th>row one</th>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<th>row two</th>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<th>row three</th>
<td>3,1,</td>
<td>3,2</td>
<td>3,3</td>
</tr>
<tr>
<th>row four</th>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
</tr>
<tr>
<th>row five</th>
<td>5,1</td>
<td>5,2</td>
<td>5,3</td>
</tr>
<tr>
<th>row six</th>
<td>6,1</td>
<td>6,2</td>
<td>6,3</td>
</tr>
<tr>
<th>row seven</th>
<td>7,1</td>
<td>7,2</td>
<td>7,3</td>
</tr>
<tr>
<th>row eight</th>
<td>8,1</td>
<td>8,2</td>
<td>8,3</td>
</tr>
<tr>
<th>row nine</th>
<td>9,1</td>
<td>9,2</td>
<td>9,3</td>
</tr>
<tr>
<th>row ten</th>
<td>10,1</td>
<td>10,2</td>
<td>10,3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>End</th>
<td>e_one</td>
<td>e_two</td>
<td>e_three</td>
</tr>
</tfoot>
</table>
</body>
body {
font-family:Arial,Verdana,sans-serif;
color:#111111;
}
table {
width:450px;
}
td,th {
padding:7px 10px 10px 10px;
}
thead th {
border-bottom:4px solid #111111;
}
tbody th {
border-left:2px solid #111111;
border-right:4px solid #111111;
}
tbody td {
border-bottom:2px solid #111111;
width: 25%;
}
th {
text-transform:uppercase;
letter-spacing:0.1em;
word-spacing:0.3em;
text-align:left;
width: 25%;
}
#blank_cell {
border:none;
}
tr:hover {
background-color:#c3e6e5;
}
Related
table {
border: 2px solid #3399CC;
border-collapse: collapse;
}
td { padding: 0.5em;
border: 2px solid #3399CC;
}
th { padding: 0.5em;
border: 2px solid #3399CC;
}
td { text-align: center;
}
.text { text-align: left;
}
td:nth-child(odd) { background-color: #F5FAFC; }
<div id="special">
<h3>Yurt Packages</h3>
<p>A variety of luxury yurt packages are available. Choose a package below and contact us to begin your reservation. We’re happy to build a custom package just for you!</p>
<table>
<thead>
<tr>
<th>Package Name</th>
<th class="text">Description</th>
<th>Nights</th>
<th>Cost per Person</th>
</tr>
</thead>
<tbody>
<tr >
<td>Weekend Escape</td>
<td class="text">Two breakfasts, a trail map, and a picnic snack</td>
<td>2</td>
<td>$450</td>
</tr>
<tr>
<td>Zen Retreat</td>
<td class="text">Four breakfasts, a trail map, a picnic snack, and a pass for the daily sunrise Yoga session</td>
<td>4</td>
<td>$600</td>
</tr>
<tr>
<td>Kayak Away</td>
<td class="text">Two breakfasts, two hours of kayak rental daily, and a trail map</td>
<td>2</td>
<td>$500</td>
</tr>
</tbody>
</table>
</div>
What you see here is HTML and CSS code for a table, that is supposed to be white and blue.
INSTRUCTIONS ask that the ODD columns are BLUE, but instead everything has a blue background. I cannot figure it out :(
help appreciated, thanks!!!
Here is CSS that will get the job done at the table cell level. If you don't want the table header to have the blue and white colors, just remove the th selectors from the CSS.
th:nth-child(even), td:nth-child(even) {
background: white;
}
th:nth-child(odd), td:nth-child(odd) {
background: blue;
}
<table>
<thead>
<tr>
<th>Package Name</th>
<th class="text">Description</th>
<th>Nights</th>
<th>Cost per Person</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is stesg</td>
<td>This is stesg</td>
<td>This is stesg</td>
<td>This is stesg</td>
</tr>
<tr>
<td>This is stesg</td>
<td>This is stesg</td>
<td>This is stesg</td>
<td>This is stesg</td>
</tr>
</tbody>
</table>
in your css add
tr:nth-child(odd){
backgound-color:blue;
}
Please check the code below. If you want the table header in a different color then you are nesting thead tr selectors and setting the background color from the CSS.
table {
border: 2px solid #3399cc;
border-collapse: collapse;
}
thead tr {
background-color: #140c12;
color: #fff;
}
th {
padding: 0.5em;
border: 2px solid #3399cc;
}
td {
padding: 0.5em;
border: 2px solid #3399cc;
text-align: center;
}
tbody tr:nth-child(odd) {
background-color: #eb7d4b;
}
.text {
text-align: left;
}
<div id="special">
<table>
<thead>
<tr>
<th>Package Name</th>
<th class="text">Description</th>
<th>Nights</th>
<th>Cost per Person</th>
</tr>
</thead>
<tbody>
<tr>
<td>Weekend Escape</td>
<td class="text">
Two breakfasts, a trail map, and a picnic snack
</td>
<td>2</td>
<td>$450</td>
</tr>
<tr>
<td>Zen Retreat</td>
<td class="text">
Four breakfasts, a trail map, a picnic snack, and a pass for the
daily sunrise Yoga session
</td>
<td>4</td>
<td>$600</td>
</tr>
<tr>
<td>Kayak Away</td>
<td class="text">
Two breakfasts, two hours of kayak rental daily, and a trail map
</td>
<td>2</td>
<td>$500</td>
</tr>
<tr>
<td>Kayak Away</td>
<td class="text">
Two breakfasts, two hours of kayak rental daily, and a trail map
</td>
<td>3</td>
<td>$800</td>
</tr>
</tbody>
</table>
</div>
I have the following HTML table code:
<html>
<head>
<style>
table {
border-spacing: 0;
}
thead tr {
background: #36304a;
color: #fff;
}
thead th {
padding: 10px 25px;
}
thead th:first-child {
border-top-left-radius: 10px;
}
thead th:last-child {
border-top-right-radius: 10px;
}
tbody tr:nth-child(even) {
background: #f5f5f5;
}
tbody td {
padding: 10px 0 10px 25px;
}
.table-container {
margin-bottom: 20px;
}
.error {
background: #ff6d6c;
}
.success {
background: #c4e0b5;
}
.round-bottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Criteria</th>
<th>Expected Value</th>
<th>Result</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abc</td>
<td>200</td>
<td>500</td>
<td>Fail</td>
</tr>
<tr>
<td>kuku</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td>lulu</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td colspan="4" class="round-bottom error">
gilbert
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Criteria</th>
<th>Expected Value</th>
<th>Result</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abc</td>
<td>200</td>
<td>500</td>
<td>Fail</td>
</tr>
<tr>
<td>kuku</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td>lulu</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td colspan="4" class="round-bottom success">
gilbert
</td>
</tr>
</tbody>
</table>
</div>
</body>
When viewing the email on Outlook, the table does not render properly:
However, on Outlook on the Web it looks fine.
I read online that Outlook uses Word to render HTML, and it has some limitations - but I'm not sure how to get around these. I tried modifying background property to background-color but it didn't do the trick.
I'm trying to apply a border to all tr's in a thead.
Css(stylus):
table
thead
tr
border: solid #000;
border-width: 0 10px;
According to chrome the styles get applied, but the border doesn't actually show up:
tr need its table to have border-collapse: collapse for border to work
table.first {
border-collapse: separate; /* property default */
}
table.second {
border-collapse: collapse;
}
table thead tr {
border-bottom: 2px solid gray;
}
/* for this demo only */
div {
margin: 25px 20px 10px;
text-decoration: underline;
}
<div>This table's tr (in thead) has no border</div>
<table class="first">
<thead>
<tr>
<td>Left Head</td>
<td>Right Head</td>
</tr>
</thead>
<tbody>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</tbody>
</table>
<div>This table's tr (in thead) has border</div>
<table class="second">
<thead>
<tr>
<td>Left Head</td>
<td>Right Head</td>
</tr>
</thead>
<tbody>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</tbody>
</table>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
i'm not a css master but i usually write border properties in one line:
border: 10px solid #000;
I'm trying to nest tables and I want the nested tables to have heights equal to the heights of their containers.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="wrapper">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="has-nested-table">
<table>
<tbody>
<tr>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j with some other letters because he has been so lonely lately</td>
<td class="has-nested-table">
<table>
<tbody>
<tr>
<td>k</td>
<td>l</td>
</tr>
</tbody>
</table>
</td>
<td>m</td>
<td>n</td>
</tr>
<tr>
<td>o</td>
<td>p</td>
<td>q</td>
<td class="has-nested-table">
<table>
<tbody>
<tr>
<td>r</td>
<td>s</td>
</tr>
<tr>
<td>t</td>
<td>u</td>
</tr>
<tr>
<td>v</td>
<td>w</td>
</tr>
</tbody>
</table>
</td>
<td>x</td>
<td>y</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
and here's the CSS
*
{
margin:0;
outline:0;
padding:0
}
html, body
{
font:normal 11px/1.4 Helvetica, Arial, Sans-Serif;
height:100%
}
.wrapper
{
margin:0 auto;
padding:0 10px;
width:940px
}
table
{
border-collapse:collapse;
height:100%;
table-layout:fixed;
width:100%
}
thead
{
background:#595959;
border:1px solid #595959
}
tbody, tr
{
height:100%
}
th
{
color:#f5f5f5
}
th, td
{
padding:5px
}
td
{
border:1px solid #ccc;
text-align:center;
vertical-align:top
}
td.has-nested-table
{
padding:0
}
td table
{
height:100%
}
td td
{
border-bottom:0;
border-left:0;
border-top:0;
vertical-align:top
}
td td:last-child
{
border:0
}
The nested tables expand in firefox and chrome but not in IE9. Help!
Add this css and then try
td.has-nested-table table{
height: auto;
}
The problem is that you are assigning the border to
td td {
and as the text takes in connecting column take more space as in
<td>j with some other letters because .... </td>
the nested table will not expand as it has only one row.
So to fix this, in addition to the #Harshit answer you need to add
td td { border: 0px; }
Check the http://jsfiddle.net/raunakkathuria/8UxbS/
working fine on IE and looks much better if border are not important in nested table, but if border are required then you need to add rowspan and stuff but that will not be full proof
I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.
Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.
In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.
Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just zero.
table, tr, td {
border: 3px solid red;
}
tr.noBorder td {
border: 0;
}
<table>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr class="noBorder">
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>A3</td>
<td>A3</td>
</tr>
</table>
Here's the output as an image:
I use this with good results:
border-style:hidden;
It also works for:
border-right-style:hidden; /*if you want to hide just a border on a cell*/
Example:
<style type="text/css">
table, th, td {
border: 2px solid green;
}
tr.hide_right > td, td.hide_right{
border-right-style:hidden;
}
tr.hide_all > td, td.hide_all{
border-style:hidden;
}
}
</style>
<table>
<tr>
<td class="hide_right">11</td>
<td>12</td>
<td class="hide_all">13</td>
</tr>
<tr class="hide_right">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr class="hide_all">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
Here is the result:
Add programatically noborder class to specific row to hide it
<style>
.noborder
{
border:none;
}
</style>
<table>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
</tr>
/*no border for this row */
<tr class="noborder">
<td>content1</td>
<td>content2</td>
</tr>
</table>
You can simply add these lines of codes here to hide a row,
Either you can write border:0 or border-style:hidden; border: none or it will happen the same thing
<style type="text/css">
table, th, td {
border: 1px solid;
}
tr.hide_all > td, td.hide_all{
border: 0;
}
}
</style>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr class= hide_all>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
running these lines of codes can solve the problem easily