I have a table with cells that have top and bottom padding of 10px. I would like to vertically align the text in these cells to the bottom, which won't work with the padding rule applied. Any suggestions?
Fiddle: http://jsfiddle.net/t520n0z4/1/
HTML Code:
<table>
<tr>
<td class="paddedCell">Name</td> <!--text should be aligned to the bottom here -->
<td class="cell">Address</td>
</tr>
<tr>
<td class="paddedCell">Email</td> <!-- text should be aligned to the bottom here -->
<td class="cell">Phone</td>
</tr>
</table>
CSS Code
table {
border: 1px solid #000;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid #000;
}
.paddedCell {
padding: 10px 0;
vertical-align: bottom;
border-right: 1px solid #000;
}
.cell {
vertical-align: bottom;
}
A solution instead of using padding you can set height to tr:
table {
border: 1px solid #000;
border-collapse: collapse;
}
tr {
height: 40px;/*add height*/
border-bottom: 1px solid #000;
}
.paddedCell {
/*padding: 10px 0; remove padding */
vertical-align: bottom;
border-right: 1px solid #000;
}
.cell {
vertical-align: bottom;
}
<table>
<tr>
<td class="paddedCell">Name</td>
<td class="cell">Address</td>
</tr>
<tr>
<td class="paddedCell">Email</td>
<td class="cell">Phone</td>
</tr>
</table>
Related
I'm stuck with a simple table design as i'm from backend I need a table like this
What I have right now
table {
border-collapse: collapse;
width: 100%;
}
tr {
border: none;
}
.first{
width: 40%;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
.middle{
width: 60%;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
.last{
width: 40%;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
td {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 10px;
}
<table>
<tr>
<td class="University">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">870</td>
</tr>
<tr>
<td class="first">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">560</td>
</tr>
</table>
Please help. I have tried with multiple html table attributes all gone in vain.
Set the thead tr element bottom border, and the right border of the .first element:
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
border-bottom: 1px solid #ddd;
}
td {
padding: 10px;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
.first {
border-right: 1px solid #ddd;
}
.middle {
width: 100%;
}
<table>
<thead>
<tr>
<th colspan="3">Unique values:</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">870</td>
</tr>
<tr>
<td class="first">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">560</td>
</tr>
</tbody>
</table>
Actually, your picture is not that clear.
I was not clear where you want border actually.
But I try to do this, Run the code snippet and have a look, and let me know if this works for you or not.
.colspan2border
{
border-collapse: collapse;
border-bottom: 1px solid red;
}
.rightBorder
{
border-collapse: collapse;
border-right: 1px solid red;
}
.pr-left1
{
padding-left: 1rem;
}
table
{
border-collapse: collapse;
}
tr
{
border: none;
}
<table>
<tr colspan="2" class='colspan2border'><td>Unique values:</td></tr>
<tr>
<td class="rightBorder pr-left1">University</td>
<td>870</td>
</tr>
<tr>
<td class="rightBorder pr-left1">Custom</td>
<td>560</td>
</tr>
</table>
I have this code where I am trying to color all 4 sides of a TD cell with red, but if you run the code, only the bottom and the right border are getting color (in Mozilla Firefox). Is there a way to color all 4 borders?
#selections_table table {
border-collapse: collapse;
}
#selections_table td,
th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td style="border-color:red">XXX-8</td>
</tr>
</tbody>
</table>
</div>
This question/answer does not help: CSS Border declare 4 sides, color, width, in one line
If there is a way to style it via a class, that will be better than using a an inline style command.
Change your inline style to style="border:1px double red;":
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td style="border:1px double red;">XXX-8</td>
</tr>
</tbody>
</table>
</div>
A little trick, create an ::after to the td you want to add the border.
#selections_table table {
border-collapse: collapse;
}
#selections_table td,
th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
position:relative;
}
#selections_table td.border-red::after{
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border: 1px solid red;
}
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td class="border-red">XXX-8</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/ym82a0k7/
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td>XXX-8</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
First, you don't need to declare td here:
#selections_table td,th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
So,
#selections_table th {
border: 1px solid black;
border-bottom: 1px solid red;
padding: 3px 4px 3px 4px;
}
td {
border: 1px solid red;
}
This is another option (by increasing the pixel, it is not a good practice but another option)
#selections_table th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
td {
border: 2px solid red;
}
or just like this:
#selections_table th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
td {
border: 1px double red;
}
I am rewriting existing servlet to make it look better. The tables are very complex and I thought it would look nicer if there is no border between two cells. I failed to define such CSS rule. Then I tried to change cell border color. I have failed again. There are probably some CSS rule priority issues that I cannot handle.
This is what I get on current Chrome and what I want to achieve:
Minimum reproducible code is there: http://jsbin.com/rokabaliti
<html>
<head><style>
table { border-collapse: collapse;}
table, th, td { border: 1px solid black;}
th, td {
padding: 5px;
text-align: left; vertical-align: top;
}
tr.all { background-color: palegreen; }
tr.other { background-color: beige; }
td.chain { border: 1px solid red; }
td.target { border-left: none; }
</style></head>
<body>
<table class='rule'>
<tr class="all"><td>XX</td></tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td></tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
</body>
</html>
Setting border on td makes border all around on td and border-collapse: collapse; just overlap two borders it doesn't remove border, so you need to remove border of both columns.
.other td:first-child{
border-right:0;
}
.other td:last-child{
border-left:0;
}
Layout 1
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
text-align: left;
vertical-align: top;
}
tr.all {
background-color: palegreen;
}
tr.other {
background-color: beige;
}
.other td:first-child{
border-right:0;
}
.other td:last-child{
border:1px solid red;
}
<table class='rule'>
<tr class="all">
<td>XX</td>
</tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td>
</tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
Layout 2
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
text-align: left;
vertical-align: top;
}
tr.all {
background-color: palegreen;
}
tr.other {
background-color: beige;
}
.other td:first-child{
border-right:0;
}
.other td:last-child{
border-left:0;
}
<table class='rule'>
<tr class="all">
<td>XX</td>
</tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td>
</tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
The border-collapse CSS property determines whether a table's borders
are separated or collapsed. In the separated model, adjacent cells
each have their own distinct borders. In the collapsed model, adjacent
table cells share borders.
MDN
Yo can try,
table { border-collapse: collapse;}
table, th, td { border-left: 1px solid black; border-bottom: 1px solid black;}
th, td {
padding: 5px;
text-align: left; vertical-align: top;
}
tr.all { background-color: palegreen; }
tr.all td { border: 1px solid black; }
tr.other { background-color: beige; }
td.chain { border: 1px solid red; }
td.target { border: 1px solid red; }
Variant #1: https://jsfiddle.net/a7p2dp3o/
<style>
table { border-collapse: collapse;}
table, th, td { border: 1px solid black;}
th, td {
padding: 5px;
text-align: left; vertical-align: top;
}
tr.all { background-color: palegreen; }
tr.other { background-color: beige; }
td.chain { border-left: 0px; }
td.target { border-left: 0px; }
</style>
<table class="rule">
<tbody><tr class="all"><td>XX</td></tr>
<tr class="other">
<td style="border-right: 0px;">YY</td>
<td class="target">ZZ</td></tr>
<tr class="other">
<td style="border-right: 0px;">AA</td>
<td class="chain">BB</td>
</tr>
</tbody>
</table>
Variant #2: https://jsfiddle.net/3u2cno6f/1/
<style>
table { border-collapse: collapse;}
table, th, td { border: 1px solid black;}
th, td {
padding: 5px;
text-align: left; vertical-align: top;
}
tr.all { background-color: palegreen; }
tr.other { background-color: beige; }
td.chain { border-color: red; }
td.target { border-color: red; }
</style>
<table class="rule">
<tbody><tr class="all"><td>XX</td></tr>
<tr class="other">
<td style="border-right: 0px;">YY</td>
<td class="target">ZZ</td></tr>
<tr class="other">
<td style="border-right: 0px;">AA</td>
<td class="chain">BB</td>
</tr>
</tbody>
</table>
Expected result 1
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
text-align: left;
vertical-align: top;
}
tr.all {
background-color: palegreen;
}
tr.other {
background-color: beige;
}
td.chain {
border: 1px solid red;
}
td.target {
}
.other>td:first-child{
border-right: 1px solid red;
}
.other>td:last-child{
border: 1px solid red;
}
<table class='rule'>
<tr class="all">
<td>XX</td>
</tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td>
</tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
Expected result 2
<table class='rule'>
<tr class="all">
<td>XX</td>
</tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td>
</tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
text-align: left;
vertical-align: top;
}
tr.all {
background-color: palegreen;
}
tr.other {
background-color: beige;
}
.other>td:not(.target) {
border: none;
}
.target{
border-left:none;
border-bottom:none;
}
I have a table in which I have to separate a row using border as in image below.
As you can see, Border separator is having a space left-right side and not fully touched to table border.
I tried giving padding,margin but nothing worked.
tr {
border-bottom: 1px solid blue;
padding: 10px; // not working
margin: 10px; // not working
}
https://jsfiddle.net/alpeshprajapati/s934Lpbx/
What is the way to achieve this?
CSS
table {
border: 1px solid black;
border-collapse: collapse;
}
thead {
background: black;
color: white;
}
th {
width: 100px;
}
tr {
float: left;
border-bottom: 1px solid blue;
width: 90%;
margin: 0 10px;
}
td{
width: 32%;
float: left;
}
Try this:
table {
border: 1px solid black;
border-collapse: collapse;
}
thead {
background: black;
color: white;
}
th {
width: 100px;
}
tr {
// border-bottom: 1px solid blue;
}
td{
padding:5px 10px;
}
.border{
background:skyblue;
width:100%;
height:2px;
}
<table>
<thead>
<th>Th1</th>
<th>Th2</th>
<th>Th3</th>
</thead>
<tbody>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
<tr>
<td colspan="3">
<div class="border"></div>
</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
<tr>
<td colspan="3">
<div class="border"></div>
</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
</tbody>
</table>
To increase the length of the border you have to increase the width of the div that is containing it.
Here is the fiddle :
http://jsfiddle.net/AV38G/
HTML
<table>
<tr class="first-line">
<td class="first-column">Some</td>
<td>Foobar</td>
<td>Stuff</td>
</tr>
<tr>
<td class="first-column">foobar</td>
<td>raboof</td>
<td>184</td>
</tr>
<tr>
<td class="first-column">bar</td>
<td>87458</td>
<td>184</td>
</tr>
<tr>
<td class="first-column">874</td>
<td>raboof</td>
<td>foobar</td>
</tr>
</table>
CSS:
/* ACTUAL CSS */
table {
width: 300px;
border-collapse: collapse;
}
tr td.first-column{
border-left: none;
}
tr.first-line {
border-bottom: 3px solid green;
border-top: none;
}
tr.first-line td {
border-left: none;
}
td {
border-left: 3px solid red;
}
tr {
border-top: 3px solid red;
}
Ugly, right. So why the red border overwrite/override the green border ?
How can I get the "untouched" horizontal green bordel ? (no HTML5/CSS3 please, accessibility purposes)
That behavior is caused because you are collapsing the border of the table, use border-spacing: 0; instead, call a class on the first data row and than I've used the selector below to turn off the border-top
.second-row td {
border-top: 0;
}
Demo (Tested on chrome and firefox)
/* ACTUAL CSS */
table {
width: 300px;
border-spacing: 0;
}
tr td.first-column{
border-left: none;
}
td {
border-left: 3px solid red;
border-top: 3px solid red;
}
tr.first-line td {
border-left: none;
border-bottom: 3px solid green;
border-top: none;
}
.second-row td {
border-top: 0;
}