I need to style a table to have rounded corners.
I'm just looking at how best to go about it:
Normally when I style a div to have rounded corners, I use 2 divs with empty comments at the top and bottom, and apply sizing & background image CSS to them.
The table, however, has internal borders, so I'd have to carefully align the vertical lines in the corner bg images, to match with the true cell borders.
Is this clear so
far?
So I was wondering how others would approach this. I think the best thing I can do is to just use one complete fixed size background image, borders and all, and overlay a borderless table on top. The table will always be the same size after all.
Can anyone think of a better way?
25 ways to do it.... http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
Actually, there are too many ways to do it.
You better make a background image with just the corners, and not the borders.
Apply a class to the top left, top right, bottom left and bottom right cell, to define that the corners-background image should be used.
And style the borders with css. Don't put them in the background image.
In your approach, you'll always gonna end up having the vertical lines in your background image not match the borders of the actual table cells.
Have you tried http://www.roundedcornr.com/?
Do something like this...
XHTML: (sorry had to remove first '<' as it wouldn't let me post it normally, FIX THIS JEFF!)
table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Incoming calls</th>
<th>National calls</th>
<th>Calls to US & Canada</th>
<th>Calls to other Phones</th>
<th>Calls to other Countries</th>
<th>SMS text messages</th>
</tr>
</thead>
<tbody>
<tr>
<td>Select</td>
<td>country</td>
<td>from</td>
<td>dropdown</td>
<td>list</td>
<td>above</td>
</tr>
</tbody>
</table>
CSS:
#pricing
{
font-weight:bold;
text-align:center
}
#pricing thead
{
background-image:url("images/pricing_top.gif");
background-position:top;
background-repeat:no-repeat;
padding:10px 0 0 /* replace 10px with the height of pricing_top.gif */
}
#pricing th
{
background-image:url("images/pricing_header_bg.gif");
background-repeat:repeat-y;
border-bottom:1px solid #c3c2c2;
width:100px /* replace 100px with the width of pricing_header_bg.gif */
}
#pricing tbody
{
background-image:url("images/pricing_bottom.gif");
background-position:bottom;
background-repeat:no-repeat;
padding:0 0 10px /* replace 10px with the height of pricing_bottom.gif */
}
#pricing td
{
background-image:url("images/pricing_cell_bg.gif");
background-repeat:repeat-y;
width:100px /* replace 100px with the width of pricing_cell_bg.gif */
}
Only drawback is that you have to create 4 images, but that shouldn't take too long. You'll also need to add a class to the final cell in each row if you want to add that drop shadow on the right and just change it's background-image and width property accordingly.
Playing off of your original idea, you could add a class to each corner cell effectively turning off their respective offending borders. You could then use a full-width background image in the <thead> and <tfoot> elements to account for the rounded corners.
The rest of the cells can have their borders turned on, and the lines will line up correctly.
The only remaining issue is accounting for that blasted drop shadow. That's a different exercise.
A better way would be a 9-grid where you have the background corners, and top, bottom, left and right backgrounds repeating
Your table goes in cell 5
Edit
As some posted in the comments you can not achieve the effect with a 9-grid.
You have to do a 12-grid-system (made up by me right now :)
Live demo
.
Code:
Warning: it's not pretty, but works
<html>
<head>
<style>
.cell1 {background: #f8f8f8 url(images/cell1.gif) no-repeat left top; height: 10px; font-size: 1px;}
.cell2 {background: #f8f8f8 url(images/cell2.gif) repeat-x top; height: 10px; font-size: 1px; border-right: solid 1px #c3c2c2; font-weight:bold; }
.cell3 {background: #f8f8f8 url(images/cell3.gif) no-repeat right top; height: 10px; font-size: 1px;}
.cell4 {background: white url(images/cell4.gif) repeat-y left; border-bottom: solid 1px #c3c2c2; width: 13px; }
.cell5 {background-color: #f8f8f8; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:bold; border-bottom: solid 1px #c3c2c2; }
.cell6 {background: white url(images/cell6.gif) repeat-y right; border-bottom: solid 1px #c3c2c2; width: 18px; }
.cell7 {background: white url(images/cell7.gif) repeat-y left; width: 13px;}
.cell8 {background-color: white; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:normal; }
.cell9 {background: white url(images/cell9.gif) repeat-y right; width: 18px;}
.cell10 {background: white url(images/cell10.gif) no-repeat left bottom; height: 17px;font-size: 1px; }
.cell11 {background: white url(images/cell11.gif) repeat-x bottom; border-right: solid 1px #c3c2c2; height: 17px; font-size: 1px; }
.cell12 {background: white url(images/cell12.gif) no-repeat right bottom; height: 17px;font-size: 1px; }
.lastcolumn, th.lastcolumn, td.lastcolumn {border-right: solid 0px #c3c2c2; }
</style>
</head>
<body>
<table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="cell1"></th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2 lastcolumn"> </th>
<th class="cell3"></th>
</tr>
<tr>
<th class="cell4"> </th>
<th class="cell5">Incoming calls</th>
<th class="cell5">National calls</th>
<th class="cell5">Calls to US & Canada</th>
<th class="cell5">Calls to other Phones</th>
<th class="cell5">Calls to other Countries</th>
<th class="cell5 lastcolumn">SMS text messages</th>
<th class="cell6"> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell7"></td>
<td class="cell8">Select</td>
<td class="cell8">country</td>
<td class="cell8">from</td>
<td class="cell8">dropdown</td>
<td class="cell8">list</td>
<td class="cell8 lastcolumn">above</td>
<td class="cell9"></td>
</tr>
<tr>
<td class="cell10"></td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11 lastcolumn"> </td>
<td class="cell12"></td>
</tr>
</tbody>
</table>
</body>
</html>
Note: there are some non-breaking spaces that SO strips from the code. Check out the living demo for more info
Enjoy!
Related
I was wondering if it was possible, with html and/or CSS, to collapse only tr with he table's outline, while having different border styles for the table's outline and trs, and the tds and ths.
I know this is complicated, so if this can make it clearer, here's a drawing of what I'm trying to achieve:
No, border-collapse applies only to the whole table, and it is not a valid property for tr or td elements so you cannot apply it to those to get a different spacing.
However you can “fake” it by adding the cell content into a div and using it for some of the styling:
Apply the outer table styling to the table as normal
Apply the row styling to the top and bottom borders of the th / td cells
Apply the "cell" styling to the divs inside the th & tds.
Working Example:
table {
border: 6px solid lightgray;
border-right-color: gray;
border-bottom-color: gray;
border-collapse: collapse;
}
td {
border-top: 5px solid gray;
}
tr:not(:last-child) td{
border-bottom: 5px solid gray;
}
th .cell,
td .cell {
margin: 5px;
padding: 5px;
border: 2px ridge lightblue;
}
<table>
<tr>
<th><div class="cell">First Name</div></th>
<th><div class="cell">Last Name</div></th>
</tr>
<tr>
<td><div class="cell">John</div></td>
<td><div class="cell">Smith</div></td>
</tr>
<tr>
<td><div class="cell">Jane</div></td>
<td><div class="cell">Doe</div></td>
</tr>
</table>
Found a way by just adding an hr and a minuscule tr between both trs.
hr {
border: 4px outset rgb(207, 172, 179);
width: 443px;
position: absolute;
top: 388px;
left: 35px;
}
tr#mini {
border: none;
padding: 0px;
margin: 0px;margin-top: 0px;
margin-bottom: 0px;
height: 8px;
}
HTML:
<table id="tableau" class="nomaltext">
<tr>
<th>
25g
</th>
<th>
50g
</th>
<th>
75g
</th>
<th>
100g
</th>
<th>
Personnalisé (min. 120g)
</th>
</tr>
<tr id="mini">
<hr>
</tr>
<tr>
<td>
5,99$
</td>
<td>
8,99$
</td>
<td>
13,80$
</td>
<td>
7,40$
</td>
<td>
11¢/gramme
</td>
</tr>
</table>
Both the gray background row and the white background row below are two separate tables. The white background table is the 'overflow-y' property set to scrollable is the number of elements within it exceeds 100px.
CSS for tables:
table {
border-collapse: collapse;
width: 100%;
}
HTML for gray table:
<div style="padding-bottom: 2px">
<table>
<thead>
<tr>
<th>Start Time</th>
<th>End Time</th>
<th>User1</th>
<th>User2</th>
<th></th>
</tr>
</thead>
</table>
</div>
CSS for gray table:
th {
background-color: #E0E0E0;
font-size: 20px;
font-weight: bold;
padding: 8px 0px 8px 0px;
text-align: left;
vertical-align: bottom;
width: 20%;
}
HTML for white table:
<div style="height:95%;overflow:auto">
<table id="modalTable" style="table-layout: fixed; width: 100%" >
<tbody>
<tr ng-repeat-start="value in MaintenanceModeEvents" class="event">
<td>{{'Start Time: MM-dd-yyyy HH:mm:ss'}}</td>
<td>{{'End Time: MM-dd-yyyy HH:mm:ss'}}</td>
<td>{{'User 1'}}</td>
<td>{{'User 2'}}</td>
<td><button type="button"</td>
</tr>
</tbody>
</table>
</div>
CSS for white table:
tr.event {
border-top: 1px solid #808080;
/*border-bottom: 1px solid #808080;*/
font-size: 14px;
padding: 8px 16px;
text-align: left;
}
The header of the gray background table is evenly spaced at 20% (there is a th with nothing in it above view comments) when the white background table's contents doesn't exceed 100px. The issue that I am running into is when the white background table's contents exceeds 100px, the scroll bar's width takes up space in the white background table and the headers from the gray background table no longer align with the white background table as seen above. How can I handle this issue? Any help would be great!
I am almost finished with the first outline of my comparison table that I'm trying to create. I have encountered some issues though that I cannot solve. And I've tried different classes, id's and properties, but it either end up doing nothing or changing something that was not intended. Some issues I solved on my own though.
Instead of posting several questions one by one, spamming SO. I put a hold on myself and grouped my questions together. So here it goes:
My Goal:
To the far left, I want to create a column that first is blank and then holds all the titles of each row.
Then I want each row that will contain a product to follow a falling sequence of: 1. Product image
2. company name
3. product name
4. price
5. button
6. HERE IS A WHITE BLANK ROW: With a category title (e.g.Functions or Compability).
7. First title in left td (e.g. audio, video). Then continuing the falling sequence with a check or x-mark in each cell, depending on that product includes named specification (audio..video.. etc)
My problem are these:
How do I get everything centred above each other? Except Left column titles which are supposed to be left-aligned.
How do I make all rows above the Category title-row, without the hover effect?
How to make the "Category Title" to rest on the 2px solid gray border?
How to make all rows above Category Title to become white?
Is there a better way to make this border in a more efficient way?
/* thick border for the top row */
#borderbottom{
border-bottom: 2px solid gray;
}
I figure that i should probably make two separate tables CSS for each table, but when I tried, the two tables did not align with each other.
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Compare Table</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<br/>
<br/>
<table class="hoverTable">
<tr>
<td class="blankcell"></td>
<td>IMAGE</td>
<td>IMAGE</td>
<td>IMAGE</td>
</tr>
<tr>
<td class="blankcell"></td>
<td>Company Name<br/>Product Name</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td class="blankcell"></td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</table>
<table class="hoverTable">
<tr id="notop">
<td class="blankcell" id="borderbottom"><h3>Category Title</h3></td>
<td id="borderbottom"></td>
<td id="borderbottom"></td>
<td id="borderbottom"></td>
</tr>
<tr>
<td class="rowTitle" colspan="4">TITLE</td>
</tr>
<tr>
<td class="rowTitle">TITLE</td>
<td id="check">✔</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td class="rowTitle">TITLE</td>
<td id="x01">✖</td>
<td>✖</td>
<td>✖</td>
</tr>
<tr id="nolast">
<td class="rowTitle">TITLE</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
</tr>
</table>
</body>
</html>
This is my CSS:
th,td {
padding: 15px;
text-align: center;
}
/* Row coloring */
.hoverTable tr:nth-child(even) {
background-color: #FAFAFA;
}
.hoverTable tr:nth-child(odd) {
background-color:#ffffff;
}
/* Upper left cell*/
.blankcell {
background: none!important;
text-align: left;
}
/*top and bottom border*/
#notop{
border:0px;
}
#nolast{
border-bottom:0px;
}
/* HOVER FUNCTION */
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:4px;
border: #000000 0px solid;
}
/* Define the default color for all the table rows */
.hoverTable tr{
background: #ffffff;
border-bottom:1px solid #B5B3B3;
border-top:1px solid #B5B3B3;
}
/* Define the hover highlight color for the table row */
.hoverTable tr:not(:nth-child(1)):hover {
background-color: #FFF0E6;
border-left:5px solid #ff6600;
}
/* Check and X-Mark Coloring*/
#check {
color: #1CF200;
}
#x01 {
color: #ff6969;
}
/* Left-hand title */
.rowTitle {
font-weight: bold;
text-align: left;
}
/* thick border for the top row */
#borderbottom{
border-bottom: 2px solid gray;
}
JSFiddle
Thank you for any help provided!
How do I get everything centred above each other? Except Left column titles which are supposed to be left-aligned.
All of the content is already being center. You already have code to left align text. It's being used on the bottom table for the first column.
.rowTitle {
font-weight: bold;
text-align: left !important;
}
How to make the "Category Title" to rest on the 2px solid gray border? Add the class category in the h3 tag
h3.category {
margin-bottom: -8px;
}
How do I make all rows above the Category title-row, without the hover effect?
You can use separate code that just doesn't use the hover code. Basically copy the hovertable with ".hoverTable tr:not(:nth-child(1)):hover" and call the new class something like toptable. (There might be a more efficient way.
How to make all rows above Category Title to become white?
If you use seperate code with basically the same values just don't copy over
.hoverTable tr:nth-child(even) {
background-color: #FAFAFA;
}
.hoverTable tr:nth-child(odd) {
background-color:#ffffff;
}
Is there a better way to make this border in a more efficient way? I would use a tag for Category. The colspan will span the 4 columns below it.
CSS
th {
border-bottom: 2px solid grey;
}
HTML
<thead>
<tr>
<th colspan="4">Category Title</th>
</tr>
</thead>
See some of these applied to this jsfiddle http://jsfiddle.net/x6co362t/
Yes you should make 2 different set of codes as this will solve most of your problems. How do they not align up? Can you should what is supposed to be aligned up?
I am trying to create a border on top of another element's border.
I have something like the following
html
<table class='table'>
<tr>
<td>123</td>
<td class="pick">123</td>
<td>123</td>
</tr>
<tr>
<td class="second" style="text-align:center;" colspan='3'>123</td>
</tr>
</table>
css
.pick {
border-bottom:solid 5px green;
}
.second {
border:solid 5px red !important;
background-color: green;
}
http://jsfiddle.net/j8zt8sb3/1/
Basically I want to create a gap look for the <td> that has a class 'pick'. Everything works fine on every browser but the red border will cover the green border in IE which means there is no gap. Is there anyways to fix this? Thanks a lot!
Just add this property:
table {
border-collapse: collapse;
}
I have a table with rounded corner, and I've put an overflow: hidden CSS command on it so that the corners of the individual cells don't protrude out. It works fine on Chrome, but not on Firefox. Can someone tell me what's wrong?
<style>
table {
border-spacing: 0px;
border: 1px solid #222;
border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
overflow: hidden;
}
th {
height: 30px;
color: #fff;
background: #222;
text-align: left;
}
tr:nth-child(even) {
background: #245876;
color: #fff;
border: none;
height: 25px;
}
tr:nth-child(odd) {
height: 23px;
}
.pos {
width: 50px;
}
.name {
width: 175px;
}
</style>
<table>
<thead>
<tr>
<th class="pos"></th>
<th class="name">Name</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pos">1</td>
<td class="name">Bob</td>
<td class="amount">1324353</td>
</tr>
<tr>
<td class="pos">2</td>
<td class="name">John</td>
<td class="amount">10611</td>
</tr>
<tr>
<td class="pos">3</td>
<td class="name">Bill</td>
<td class="amount">3270</td>
</tr>
<tr>
<td class="pos">4</td>
<td class="name">Brian</td>
<td class="amount">1950</td>
</tr>
<tr>
<td class="pos">5</td>
<td class="name">Dan</td>
<td class="amount">1760</td>
</tr>
</tbody>
</table>
The spec does not require the behavior you are looking for: "The ‘border-radius’ properties do apply to ‘table’ and ‘inline-table’ elements. When ‘border-collapse’ is ‘collapse’, the UA may apply the border-radius properties to ‘table’ and ‘inline-table’ elements, but is not required to." (http://dev.w3.org/csswg/css-backgrounds/#border-radius-tables)
It is possible it simply will not work in Firefox. If that's the case, you could apply border-radius to the header cells (:first-child and :last-child in the header row), but it doesn't always line up properly. A bit of a PITA, I know.
thead tr th:first-child { border-radius:8px 0 0 0; }
thead tr th:last-child { border-radius:0 8px 0 0; }
This might help. How to make CSS3 rounded corners hide overflow in Chrome/Opera
Add where you want:
-moz-overflow: hidden;
I like Pete Scott's answer. But depending on your design, you can create the radius effect on a table by wrapping the table itself in a containing element that has the radius left and right, overflow hidden. Then, position relative the table, and -*px to create the required visual effect. But without seeing the desired end result, I am unable to provide an example.
It's possible to change the effect of overflow on the table element with the following trick: change the display of the table, e.g., to inline-block (this value preserves the shrink-fit width of the table and shouldn't break the layout assuming the table is surrounded by block elements). The resulting rendering will be equivalent as if the table has the div wrapper with border-radius and overflow, which renders in Firefox without problems. Here is the JSbin example.