I would like to make an HTML table with rounded corners and rows dividers.
However, it looks like they are mutually exclusive:
rows dividers tr {border-bottom: 1px solid #000000} require
border-collapse: collapse to work
table rounded corners table { border-radius: 4px } don't work with
border-collapse: collapse
how can I achieve this?
You can wrap the table inside a div, and give that div a border-radius plus overflow:hidden.
A div is a block element, so i used display:table on it to have the width of the table. But you can use inline-block or other.
See below
td {
padding: 10px;
background: red;
}
tr {
border-bottom: 2px solid #000000;
}
table {
border-collapse: collapse;
}
.wrapper {
border-radius: 10px;
border: 2px solid green;
display: table;
overflow: hidden;
}
<div class="wrapper">
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
don't add the border radius to the table itself. try to wrap the table inside a div element, then add the border-radius to the div element.
Related
I'm trying to highlight a table row by changing the border color of that individual row. This is my CSS:
table { border-collapse: collapse;}
td { min-width: 100px; border: 1px solid green; }
.highlight td { border: 1px solid orange; }
...and this is my HTML:
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr class="highlight">
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
The result is this:
The top border remains green. The only way I could get it work was by changing border-bottom color of the TD elements 1 and 2. Is there a more elegant solution? Using the outline property didn't do the trick. Thanks!
Only by removing border-collapse: collapse; because it merges borders that are adjacent.
Then apply a 0 value for border-spacing
Border-spacing : MDN
The border-spacing CSS property specifies the distance between the borders of adjacent table cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.
table {
/*border-collapse: collapse;*/
border-spacing:0;
font-size:32px;
}
td {
min-width: 100px;
border: 3px solid green;
}
.highlight td {
border-color: orange;
}
/* optional enhancment to narrow vertical joined borders*/
td + td {
border-left:0;
}
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr class="highlight">
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
try that
table { border-collapse: collapse;}
td { min-width: 100px;}
td:first-child{border-right: 1px solid green;}
tr{border: 1px solid green;}
tr.highlight td { border: 1px solid orange; border-top: 1px solid orange; }
you should give the border to the rows and the td that are first child, then apply different color for the border of the highlited tr.
In order to fix this give your tr a display property of block. See the code snippet below.
table {
width: 100%;
border-collapse: collapse;
}
tr {
width: 100%;
display: block;
}
td {
min-width: 100px;
text-align: center;
border: 1px solid green;
/*
Remove the left border from td
to make the border width even
on all sides.
*/
border-left: none;
}
td:first-child {
/*
If the td is the first child
give it a left border to close
the left side of the row.
*/
border-left: 1px solid green;
}
.highlight td {
/*
Since you're changing only the
border-color, you only need to
redefine the border-color.
*/
border-color: orange;
}
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr class="highlight">
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
Alternatively, if you set the width of tr to 100%, which I have in the script, you can use inline-block or inline-flex for your display property.
/*
In the case of the tr with a width of 100%
all of the following have the same output
for their borders.
*/
display: inline-block;
display: inline-flex;
display: block;
I am trying to add cell spacing to a html table.
I want to add spacing between cells without the outer spacing.
My problem is, that the cellspacing html attribute and border-spacing CSS property adds spacing outside too.
I would like to put cell spacing without the red (outer) part - only the yellow one.
Is it possible?
Edit:
The image was drawn by hand (MS-Paint) only for illustration.
The coloring is for debugging - so that one can see where the borders, and spacing is.
I have found a roundabout solution including some additional div-s:
.inner-spacing {
border-collapse: collapse;
background-color: yellow;
border: 2px solid black;
}
.inner-spacing td {
padding: 0;
}
.inner-spacing td > div {
width: 60px;
height: 60px;
background-color: green;
border: 2px solid black;
margin: 10px;
}
.inner-spacing tr:first-child > td > div {
margin-top: 0px;
}
.inner-spacing tr:last-child > td > div {
margin-bottom: 0px;
}
.inner-spacing tr > td:first-child > div {
margin-left: 0px;
}
.inner-spacing tr > td:last-child > div {
margin-right: 0px;
}
<table class="inner-spacing">
<tr>
<td>
<div/>
</td>
<td>
<div/>
</td>
</tr>
<tr>
<td>
<div/>
</td>
<td>
<div/>
</td>
</tr>
</table>
So to summarize, I would like the table to have border spacing with the table border collapsing onto the cells (no spacing).
I wonder if there are some other solutions - so any new solution is welcome!
This will be tricky a little bit...you will need to set display:block and border-spacing:10px for spacing between cells and same negative margin:-10px to remove the outer spacing
Stack Snippet
table {
font: bold 13px Verdana;
background: black;
margin: 30px auto;
border-spacing: 0;
}
table td {
padding: 30px;
background: red;
color: #fff;
}
table tbody {
margin: -10px;
display: block;
border-spacing: 10px;
}
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
This is kinda tricky, you need to follow something like this:
table, td {border: 1px solid #999; border-collapse: collapse;}
table {margin: -5px;}
table td {width: 32px; height: 32px; margin: 5px;}
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Moving what was a collection of divs into a table for better column control.
My CSS class associated with the "row" doesn't seem to be carrying the border and webkit properties over when refactored into a table. W3C verified my thought that borders on tables should work (http://www.w3schools.com/css/css_table.asp)
What am I missing to show the CSS border and webkit properties in the table?
JSFiddles:
div: http://jsfiddle.net/phamousphil/rgt03mu4/
table: http://jsfiddle.net/phamousphil/tca7vfyv/
Code:
CSS
.notification-popup-container {
background-color: #fff;
border: 1px solid black;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
width: 400px;
z-index: 99;
display: none;
}
HTML Table
<table class="notification-popup-container-main">
<tbody>
<tr class="notification-popup-container">
<td class="notification-type">
<div>TYPE TYPE</div>
</td>
<td class="notification-popup-body">
<div class="notification-popup-title">TITLE</div>
<div class="notification-popup-message">MESSAGE</div>
</td>
</tr>
</tbody>
</table>
You're putting a border around what is now the tr element, and tr elements can't have borders by default. There's a nice explanation here: https://stackoverflow.com/a/18679047/1876899
You can either add border-collapse: collapse; to the table: Fiddle
Or add the border to the tds instead. Fiddle
.notification-popup-container td {
border: 1px solid black;
}
I have a table wherein I need to put a border around a given row or rows with spacing between them.
I seem to be able to do one or the other.
I know I can use
table { border-collapse: separate; border-spacing: 1em 0.5em; }
To get my spacing, but then the border won't show up with something like
tr.bordered { border: 1px solid blue; }
If I set border-collapse: collapse, the blue border shows. But then no spacing.
Am I missing something here?
EDIT: JS FIDDLE here
You can see, if you use "collapse", the border works but there is no space.
If you use "separate" you get spacing but no border.
Duplicate question here: Style row or column rather than cells when border-collapse: separate
The recommendation is to use colspan to simulate a table row, and add a border to the table inside of the colspan.
I guess what you want is to put spaces between the borders of the cell and its data? If so, you can use the property padding in td. ex:
td {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 10px;
}
You can have an inner table which is bordered:
<table>
<tr><td colspan="3">
<table class="bordered">
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
</table>
</td></tr>
<tr>
<td>lorem</td>
<td>ipsum</td>
<td>dolor</td>
</tr>
</table>
Demo: http://jsfiddle.net/2nMcg/7/
If you want spacing between the table rows and add a border style to each row you can achieve this by setting only top and bottom border-spacing otherwise you cannot have a continuous line for each table row. And you need to set the border style on the td. Since border-collapse: collapse prevents to style the border on the TR element but you need it to set the top and bottom spacing between rows.
http://jsfiddle.net/6rLsL/1/
http://jsfiddle.net/6rLsL/1/show
table {
border-collapse: separate;
border-spacing: 0 0.5em;
}
td {
padding: 0.5em;
border-top: 1px solid #000;
}
you can try to draw an unblured shadow : DEMO
.bordered {
box-shadow:0 0 0 1px black;
}
:( this works in FF , but ...
so ,
we can use :first-child and :last-child to draw borders from tds,
DEMO 2
.bordered td {
border: 1px solid #000;
border-left:none;
border:right:none;
padding:1em 0.5em;
border-right:none;
}
.bordered td:first-child {
border-left:1px solid #000
}
.bordered td:last-child {
border-right:1px solid #000;
border-left:none;
}
table {
border-spacing: 0;
}
My question is what html and css features should I research before making tictactoe.
I'm currently using a HTML table with CSS with ugly X and O characters:
My CSS:
table tr td {
border: 1px solid;
}
My HTML:
<table>
<tr>
<td>O</td><td></td><td></td>
</tr>
<tr>
<td></td><td>X</td><td></td>
</tr>
<tr>
<td></td><td></td><td>X</td>
</tr>
</table>
Give your tds a fixed width and height, and set the table's borders to collapse:
table {
border-collapse: collapse;
}
td {
border: 5px solid #000;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
You should also look into border-radius.
Here's the fiddle, but the rest is up to you.