I would like to know how to create a rounded corners on a table head only?
Additional detail... I want to have a rouded head of the table the rest of the table is a rectangle just the first header row should have rounded corners.
The problem is, that you need to make the certain inner elements round.
So you have to make for the first th and the last th round to get the wished solution.
table th:first-child{
border-radius:10px 0 0 10px;
}
table th:last-child{
border-radius:0 10px 10px 0;
}
It would be easier to help you if we saw your code or at least the code that didn't work for you.
Anyway, this tutorial seems relevant to your question http://www.jeox.com/docs/manual/web/round_table_corners.html
EDIT: Or this one http://blog.jezmckean.com/css3-rounded-table-corners-no-images/
There are a number of options. It depends on what you really want to achieve visually.
But be sure that border-collapse is NOT set to collapse, because that will not work. For more information, see this mozilla link: https://developer.mozilla.org/en/CSS/border-radius
#uno,
#due th,
#tre th {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border: 1px solid black;
}
#tre td {
border: 1px solid black;
}
<table id="uno" border="0">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<br>
<table id="due" border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<br>
<table id="tre" border="0">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Related
I noticed that my table, in which i set a border-collapse:collapse and border-bottom: 1px solid grey, has a thicker line between the rows every 5th row. How can I get them to also be 1px?
I also noticed that I cannot set a border-radius. Why is that?
Here's my code:
.list table {
margin: 0 auto;
width: 95%;
border-collapse: collapse;
border: 2px solid black;
border-radius: 10px; //HAS NO EFFECT
}
.list th, .list td {
border-bottom: 1px solid grey;
padding: 10px;
}
No problem with thicker border-bottom for me here. So your problem most likely lies within your HTML which you did not share...
.list table {
margin: 0 auto;
width: 95%;
border-collapse: collapse;
border: 2px solid black;
border-radius: 10px; //HAS NO EFFECT
}
.list th, .list td {
border-bottom: 1px solid grey;
padding: 10px;
}
<div class="list">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 3</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>Row 2 Data 3</td>
</tr>
<tr>
<td>Row 3 Data 1</td>
<td>Row 3 Data 2</td>
<td>Row 3 Data 3</td>
</tr>
<tr>
<td>Row 4 Data 1</td>
<td>Row 4 Data 2</td>
<td>Row 4 Data 3</td>
</tr>
<tr>
<td>Row 5 Data 1</td>
<td>Row 5 Data 2</td>
<td>Row 5 Data 3</td>
</tr>
<tr>
<td>Row 6 Data 1</td>
<td>Row 6 Data 2</td>
<td>Row 6 Data 3</td>
</tr>
<tr>
<td>Row 7 Data 1</td>
<td>Row 7 Data 2</td>
<td>Row 7 Data 3</td>
</tr>
<tr>
<td>Row 8 Data 1</td>
<td>Row 8 Data 2</td>
<td>Row 8 Data 3</td>
</tr>
<tr>
<td>Row 9 Data 1</td>
<td>Row 9 Data 2</td>
<td>Row 9 Data 3</td>
</tr>
<tr>
<td>Row 10 Data 1</td>
<td>Row 10 Data 2</td>
<td>Row 10 Data 3</td>
</tr>
<tr>
<td>Row 11 Data 1</td>
<td>Row 11 Data 2</td>
<td>Row 11 Data 3</td>
</tr>
</table>
</div>
I have the following table below and I would like to add style to overflow-x in container.
I've tried, but doesn't work for me (Chrome):
.container::-webkit-scrollbar:horizontal {
width: 10px;
}
.container::-webkit-scrollbar-thumb:horizontal {
height: 20px;
background: hsla(0, 0%, 53.3%, .4);
}
AND
.container::-webkit-scrollbar {
width: 10px;
}
.container::-webkit-scrollbar-thumb {
height: 20px;
background: hsla(0, 0%, 53.3%, .4);
}
Fiddle
<div class="container">
<table>
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th>Column D</th>
<th>Column E</th>
<th>Column F</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
<td>Row 1 Cell 4</td>
<td>Row 1 Cell 5</td>
<td>Row 1 Cell 6</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
<td>Row 2 Cell 4</td>
<td>Row 2 Cell 5</td>
<td>Row 2 Cell 6</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
<td>Row 3 Cell 3</td>
<td>Row 3 Cell 4</td>
<td>Row 3 Cell 5</td>
<td>Row 3 Cell 6</td>
</tr>
</tbody>
</table>
</div>
.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: .5em 1em;
}
run this and does it work for you?
<div class="container">
<table>
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th>Column D</th>
<th>Column E</th>
<th>Column F</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
<td>Row 1 Cell 4</td>
<td>Row 1 Cell 5</td>
<td>Row 1 Cell 6</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
<td>Row 2 Cell 4</td>
<td>Row 2 Cell 5</td>
<td>Row 2 Cell 6</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
<td>Row 3 Cell 3</td>
<td>Row 3 Cell 4</td>
<td>Row 3 Cell 5</td>
<td>Row 3 Cell 6</td>
</tr>
</tbody>
</table>
</div>
<style>
.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: .5em 1em;
}
</style>
I have a page with several tables on it. To improve readability the body of each table is collapsed, so the user just sees the header and the footer. There is a button to toggle it to expand.
In IE and Firefox, it works great. But in Chrome and Safari, there is white space in the place of the collapsed row. Is there a workaround for those two browsers that will remove the white space?
Here is example code:
.collapse {
visibility: collapse;
}
<table>
<caption>This is a Table</caption>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody class='collapse'>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL 1</td>
<td>TOTAL 2</td>
</tr>
</tfoot>
</table>
Chrome and Safari treat visibility: collapse as visibility: hidden.
This will only work in Firefox/IE.
You can change it to display: none to make sure it works the same in all browsers, however this way you will miss the general idea of the collapse value, where all the width/height of the table's elements are calculated and take into account while affecting other elements in the table:
.collapse {
display: none;
}
<table>
<caption>This is a Table</caption>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody class='collapse'>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL 1</td>
<td>TOTAL 2</td>
</tr>
</tfoot>
</table>
This question already has answers here:
Alternate table row color using CSS?
(11 answers)
Closed 6 years ago.
I have a table with class table. The only styling so far is the table th. I'd like to use a CSS value to alternate between white and silver for the rows, and hover silver for the entire row. Does anyone have the code for that?
<table class='table'>
<tr>
<th>heading</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
That is the html example (as it's written in php)
CSS
.table {
background-color: #FFFFFF;
color: #000000;
}
.table th {
background-color: #333333;
color: #FFFFFF;
}
That's it so far. Looking for the values to use for I'm guessing the table tr css.
Saying different because even/odd doesn't work & it's dynamic php not strict html.
If you've already set the background color of your table to white, you just need to set the alternate row and hover backgrounds, like so:
.table tr {
transition: background 0.2s ease-in;
}
.table tr:nth-child(odd) {
background: silver;
}
.table tr:hover {
background: silver;
cursor: pointer;
}
Additionally, you probably don't need to repeat the table class on each row, FWIW. You can just target those rows using .table tr as I have done. If you're trying to make sure the table header and body styles don't interfere with each other, it's more semantic and just cleaner to wrap those elements in a thead and tbody:
<table class='table'>
<thead>
<tr>
<th>heading</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</tbody>
</table>
You can achieve this with a little bit css, just use the n-th child selector, like this:
HTML:
<table class="alternate">
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
</table>
CSS:
.alternate tr:nth-child(2n) {
background-color: silver;
}
.alternate tr {
background-color: white;
}
.alternate tr:nth-child(2n):hover, .alternate tr:hover {
background-color: grey;
}
And here is a working fiddle, I hope that is what you were looking for.
I am styling table for my website. I want to have a table where first TR doesn't have border while others TR and their TD's have a border.
Code: http://jsfiddle.net/azq6xfnr/ or here:
.table2 {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
.table2 .header {
background-color: #d8ff93;
color: #126f06;
border: 0;
}
.table2 td {
border: 1px solid #53f673;
padding: 10px;
}
.table2 tr:not(.header):nth-child(odd) {
background-color: #3cde53;
}
<table class="table2">
<tr class="header">
<td>Lp.</td>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
</table>
Use the CSS first-child selector. Here is a fiddle http://jsfiddle.net/r8p061hs/ or http://jsfiddle.net/r8p061hs/1/
.table2 {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
.table2 .header {
background-color: #d8ff93;
color: #126f06;
border: 0;
}
.table2 td {
border: 1px solid #53f673;
padding: 10px;
}
.table2 tr:not(.header):nth-child(odd) {
background-color: #3cde53;
}
.table2 tr:first-child {
border: 1px solid #53f673;
}
.table2 tr:first-child td {
border: none;
}
<table class="table2">
<tr class="header">
<td>Lp.</td>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
</table>
I think css pseudo class :first-child could help you: http://www.w3schools.com/cssref/sel_firstchild.asp
You need to remove the border from both your table, and the cells in the .header row, no need to use :first-child or :first-of-type as you've given the row the class header
Demo Fiddle
.table2 {
border-collapse: collapse;
border-spacing:0;
text-align: center;
/* remove the border from here */
}
.table2 .header td{
border:none; /* and from here */
}
As an alternative to the other answers, if your intention is that the first row be styled this way to be a header row, you could also consider using the more semantic <thead> grouping with <th> elements, if that's practical. You could then class them (advisable) or just rely on the tag names (less advisable due to selector performance, but still possible).
By then grouping subsequent rows within a <tbody>, you could also simplify your alternate row colouring selector, as you would be able to avoid the :not pseudo-selector.
Example of adjusted code:
<table class="table2">
<thead class="header">
<tr><th>Lp.</th><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Row 1</td><td>Row 1</td></tr>
<tr><td>2</td><td>Row 2</td><td>Row 2</td></tr>
<tr><td>3</td><td>Row 3</td><td>Row 3</td></tr>
<tr><td>4</td><td>Row 4</td><td>Row 4</td></tr>
<tr><td>5</td><td>Row 5</td><td>Row 5</td></tr>
</tbody>
</table>