I'm trying to create a "wall" as in linkedin and I'm doing that by creating a long table. I've changed background color and table color to give contrast. My issue is that I can't separate my table rows so that the background color shows between them.
All of the examples I find use
<table style="border-collapse: separate;border-spacing:0 1rem;">
How do I color in the spacing to match the background?
Or are there better ways of solving this?
You can't do it exactly the way you want. Your options are:
add padding to every cell in the desired row: tr.this-one td { padding-bottom: 1em;}. This will use cells' background color.
add thick border to every cell in the desired row: tr.this-one td { border-bottom: 1em solid red;}. This will use border color you set, which you can make to match the background color you have.
add a row in the markup: <tr><td colspan="10"></td></tr> and style it the way you'd like. You can also have <thead>/<tfoot>/multiple <tbody> elements inside a table as a way to semantically group rows (but they're not styleable by themselves).
Hi
Maybe this will help. I put table into a div container and set it background. Then if you need to have another color between rows just change background-color property of table, because now is transparent should be same as container background.
table {
border-collapse: separate;
border-spacing: 0rem 1rem;
background-color: transparent;
border: 1px solid yellow;
}
tr {
background-color: tomato;
}
td {
padding: 5px;
}
.container {
display: flex;
justify-content: center;
background-color: royalblue;
}
<div class="container">
<table>
<tr>
<td>mallard</td>
<td>colorful</td>
</tr>
<tr>
<td>dog</td>
<td>piebald</td>
</tr>
<tr>
<td>fox</td>
<td>foxy</td>
</tr>
</table>
</div>
Cheers
Related
For certain table cells i would like to have a multi colored top-border or bottom-border.
Based on how-to-create-multi-color-border-with-css and css-multi-color-border i was able to create a multi color border.
The problem is that i want to combine it for a table cell td where some cells have a normal border and others have a multi color border.
This code below sets the multi color for a cell but as soon as a i want to add black borders for "normal" cells it overwrites the multi color border (see codepen)
<style>
.works .gap-from {
text-align:center;
border-bottom: 4px solid;
border-image: linear-gradient(to right, lightgrey 40%, yellow 40%) 1;
}
</style>
<table class="works">
<tr><td>no color border</td><td class="gap-from">without span</td></tr>
<tr><td><span class="gap-from">with span</span></td></tr>
</table>
It seems to make it partly work a background color must be set for the table. But this leads to thick border lines.
table.works {background-color: black;}
table.works colgroup {background-color: white;}
FYI: the purpose is to visualize date overlaps and date gaps.
Question
What can be done to have
normal thin borders for every cell
multi color borders for certain cells
without using additional markup (an additional span)?
Because both normal cell and multicolor cell use the same border property to achieve the border look and feel, one must overwrite the other. If you need 2 border for multicolor cell, you may transfer one border to another element. Since there is a requirement (without using additional markup), we can make use of the psuedo element to host the multicolor border. Thus all cell will have thin black border and multicolor cell will have an additional thick multicolor bottom border.
table {
border-collapse: collapse;
}
td {
position: relative;
/* normal thin borders for every cell */
border: 1px solid black;
}
/* let the psuedo element host the multi-color border, so it wont be overritten by normal td */
td.multiColor:after {
border-bottom: 4px solid;
border-image: linear-gradient(to right, lightgrey 40%, yellow 40%) 1;
/* psuedo element positioning */
position: absolute;
content: '';
height: 100%;
width: 100%;
left: 0;
top: 0;
/* tell the borowser its border width is included with its element size, so it will not overlap with td border */
box-sizing: border-box;
}
<table>
<tr>
<td>normal cell</td>
<td class='multiColor'>multi color</td>
</tr>
<tr>
<td class="multiColor">multi color</td>
<td>normal cell</td>
</tr>
</table>
I'm trying to make the border and background of a table to go around the caption tag, rather than excluding it for accessibility reasons. I was it to display similar to a th tag.
I've tried to add and remove borders, but the border and background styles are in a stylesheet I don't want to alter (or duplicate), making this challenging.
<table class="border-background-stylesheet">
<caption>Caption</caption>
<tr><th colspan="2">What I want caption to look like</th></tr>
<tr><td>Data cell</td><td>Data cell</td></tr>
</table>
Example:
.border-background-stylesheet {
border:#222222;
background:#00EE00;
}
<table class="border-background-stylesheet">
<caption>Caption</caption>
<tr><th colspan="100">What I want caption to look like</th></tr>
<tr><td>Data cell</td><td>Data cell</td></tr>
</table>
This appears to fulfil the requirement:
Basically, border the whole table, then remove it from the top.
Next, border the whole caption, then remove it from the bottom.
Result? Two blocks that appear as just one.
.border-background-stylesheet
{
background:#00EE00;
border: solid 1px black;
border-top: none;
}
caption
{
background:#00EE00;
border: solid 1px black;
border-bottom: none;
}
<table class="border-background-stylesheet">
<caption>Caption</caption>
<tr><th>What I want caption to look like</tr></th>
</table>
So I want to select a specific table row and change the background color. I know I can code it via html. But I would rather do it through CSS. I tried giving the table row a class name, but it still wont change the background color. I'm trying to change the background of the class "update". https://jsfiddle.net/q0395cyc/
<table class="table3">
<tbody>
<tr class="update">
<td >
FUNDRAISING UPDATE: $2.5 million in commited capital
</td>
</tr>
First fix your HTML syntax errors (unclosed tbody, tables etc...)
TR are not meant for design. Forget they exist.
TRs are just a way to tell the browser where your TDs group spans/ends.
Style the inner TD instead
.update td {
background: red;
}
Example trying to style TR:
tr.styled{
background: red; /* will become red but... don't. */
border-radius: 10px; /* this will not work */
padding: 10px; /* neither will this */
/* neither many other styles here */
}
<table>
<tr class="styled">
<td>Special offer</td>
</tr>
</table>
Styling inner TD:
tr.styled td{
background: red;
border-radius: 5px;
padding: 10px;
}
<table>
<tr class="styled">
<td>Special offer</td>
</tr>
</table>
Example: http://jsfiddle.net/WaJy7/
I'm trying to add a semi-transparent bottom border to each of my <tr> tags, but the border color is darker than it should be for all but the bottom row and I can't figure out why.
Can you explain why this happens and how to fix it?
I'm not interested in solutions that involve using non-transparent colors.
It appears to be a rendering bug with border-collapse. Tables are fun!
Anyway, I removed border-collapse: collapse and moved your border styles to the table cells themselves. It's happier now.
http://jsfiddle.net/WaJy7/2/
table{
border-spacing: 0; // Equivalent of cell-spacing: 0 on table
width: 300px;
margin: 30px;
}
table tbody td{
border-bottom: 10px solid rgba(0,0,0,0.5);
}
table tbody tr td{
text-align: center;
padding: 15px;
}
I have a table in my HTML yet I only want vertical spacing as it doesn't look right with the 25px horizontally. I can see no attribute in HTML to do this so is it possible?
Thanks in Advance,
Dean
EDIT:
I have a table with cellspacing all the way around of 25px. I would only like vertical cellspacing of 25px.
the cellpadding attribute, which I assume you're talking about, will only take a number and use it as pixels between the cell wall and content. You'll have to come up with a workaround, depending on your layout you may want to use a <div> instead, or if there aren't any borders around the cells you can add style='padding-bottom:25px' to it to create the same effect.
Just add this in the < head > section, just after the head tag opening of your page:
This should do the work:
<style type="text/css">
td { margin: 25px 0px; } /* tells the table to have 25
px on top and bottom, zero px on left and right */
</style>
Cleaner <table> element solution (useful for in-lining styles).
table {
border-collapse: separate;
border-spacing: 0 20px;
}
th {
background-color: blue;
color: white;
}
th, td {
width: 150px;
border: 1px solid black;
padding: 5px;
}
<table>
<tbody>
<tr>
<th>Vehicle <th>No. of Wheels <th>Rep (0-10)
<tr>
<td>Skateboard <td>4 <td>7
<tr>
<td>BMX <td>2 <td>6
<tr>
<td>Unicycle <td>1 <td>-1
I discovered this:
border-bottom: 25px solid transparent;
Be aware that IE6 has a problem with transparency.