I would like to have some spacing between border-bottom, as it is on second picture. if I add padding-left, only text and checkbox will move to right. border-bottom stays the same.
form td.caption {
font-weight: bold;
border-bottom: 1px solid #d3d3d3;
padding-top: 1em;
}
My code gives me this:
Style I want to achieve:
table td.caption {
font-weight: bold;
border-bottom: 1px solid #d3d3d3;
padding-top: 1em;
min-width:100px;
}
table {
border-spacing: 10px;
border-collapse: separate;
}
<table>
<tr><td class="caption">test</td><td class="caption">2</td></tr>
<tr><td></td><td></td></tr>
</table>
table td.caption {
border-bottom: 1px solid #d3d3d3;
padding-top: 1em;
width:150px;
font-size:12px;
}
table {
border-spacing: 7px;
border-collapse: separate;
}
<table>
<tr>
<td class="caption">Select Chapters</td>
<td class="caption" align="center"><input type="checkbox"></td>
</tr>
</table>
Is this the same that you are looking for?
Hope this helps.
Related
I'm building a very basic test website in HTML, and I'm learning how to put borders on table cells. I have a problem, I'm trying to round the borders in my table but I just get rounded cells (td and th), but not the table itself.
table,
th,
td {
text-align: center;
width: 30%;
border: 5px solid aqua;
border-collapse: collapse;
border-radius: 45px;
font-family: arial;
padding: 11px;
}
th {
color: white;
font-family: impact;
}
td {
color: yellow;
}
tr:nth-child(odd) {
background-color: darkblue;
}
<table align=c enter>
<tr>
<th>Choncho</th>
<th>Klokin</th>
<th>Fetuc</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>papas</td>
<td>refrescos</td>
<td>tingas</td>
</tr>
</table>
I even tried doing the following to see if there were any changes:
table {
border-radius: 45px;
}
the,
td {
text-align: center;
width: 30%;
border: 5px solid aqua;
font-family: arial;
padding: 11px;
}
But all the borders remain squares.
I think that has something to do with collapsing the border.
Try to remove this line
border-collapse: collapse;
table,
th,
td {
text-align: center;
width: 30%;
border: 5px solid aqua;
/* border-collapse: collapse; *//* remove this line */
border-radius: 45px;
font-family: arial;
padding: 11px;
}
th {
color: white;
font-family: impact;
}
td {
color: yellow;
}
tr:nth-child(odd) {
background-color: darkblue;
}
<table align=c enter>
<tr>
<th>Choncho</th>
<th>Klokin</th>
<th>Fetuc</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>papas</td>
<td>refrescos</td>
<td>tingas</td>
</tr>
</table>
Then use padding and margin to control the spacing if needed
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>
How should I give color to a table tr along with a separate border color.
Here is my class properties in style.css.
table tr {
background: #9a9a9a;
border-color: #000000;
font-size: 21px;
color: #fff;
font-weight: bold;
}
<table>
<tr>
<td>Cell1</td>
<td>Cell2</td>
</tr>
</table>
I need to give black color to the border and font color as white with background color as dark grey.
How to do this?
You need to apply border on td
tr td {
background: #9a9a9a;
border:1px solid #000000;
font-size: 21px;
color: #fff;
font-weight: bold;
}
border will apply from all 4 sides. you can change border sides with
border-top, border-bottom, border-left, border-right
Border is not allowed for table rows, but only for whole tables or table cells. However, you can use the outline property to draw a border. It only doesn't count towards the box model and you cannot set individual sides in terms of color, style or width.
To select a specific row, use a pseudo-class on the tr.
td {
padding: 1em 2em;
}
tr:hover {
background: #666;
outline: 1px solid black;
color: white;
}
<table cellspacing="0">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
#table {
border-collapse: collapse;
border-spacing: 0;
text-align: center;
width: 100%;
}
#table th {
text-transform: uppercase;
font-family: Helvetica;
font-weight: bold;
border-bottom: 2px solid #107DBA;
padding-bottom: 5px;
}
#table tr:nth-child(even) {
background: #e7e7e7;
border-bottom: 4px solid #ccc;
}
#table td {
padding: 9px 2px;
text-transform: capitalize;
font-size: 15px;
font-family: Tahoma;
}
<table id="table">
<tr>
<th>firstname</th>
<th>lastname</th>
</tr>
<tr>
<td>john</td>
<td>doe</td>
</tr>
<tr>
<td>sara</td>
<td>cein</td>
</tr>
<tr>
<td>hamid</td>
<td>hagh</td>
</tr>
<tr>
<td>maryam</td>
<td>temori</td>
</tr>
</table>
Link to jsfiddle
<table class="cr-table">
<thead class="cr-th">
<tr>
<th>Your Item #</th>
<th>Product Description</th>
<th>U of M</th>
<th>Qty Ordered</th>
<th>Qty Shipped</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody class="cr-tbody">
<tr>
<td colspan="7">
<span>Pre-text</span>
</td>
</tr>
<tr style="padding:0px;margin:0px">
<td><span>Code</span></td>
<td><span>Name</span></td>
<td><span>UoS id</span></td>
<td><span>Qty Ordered</span></td>
<td><span>Qty Shipped</span></td>
<td><span>Price</span></td>
<td><span>Subtotal</span></td>
</tr>
<tr style="padding:0px;margin:0px">
<td><span>Code</span></td>
<td><span>Name</span></td>
<td><span>UoS id</span></td>
<td><span>Qty Ordered</span></td>
<td><span>Qty Shipped</span></td>
<td><span>Price</span></td>
<td><span>Subtotal</span></td>
</tr>
<tr>
<td colspan="7">
<span>Post-text</span>
</td>
</tr>
</tbody>
css:
.cr-table {
width: 100% !important; height: 50%; font-size: 11px !important; border: 1px solid black !important;
padding:0px !important;margin: 0px !important;
}
.cr-tbody {border: 1px solid black !important; font-size: 11px; height: 50%; border-collapse: collapse;}
.cr-th {font-size: 13px;border: 1px solid black; color: white; background-color: #829BAE;}
.cr-title {font-size: 22px; text-align: right; margin-right: 5%; font-weight: bold }
.cr-cell-name {font-size: 11px;background-color: #829BAE; border: 1px solid black; color: white; text-align: center}
.cr-cell-content {font-size: 11px; border: 1px solid black; text-align:center;}
.cr-td-foot {border-top: 0px;border-bottom:0px;border-right: solid black 1px;font-size: 11px;padding:3px}
.cr-td-foot-ri {border-top: 0px;border-bottom:0px;font-size: 11px;padding:3px}
.cr-address {padding-left: 0px; font-size: 11px; padding-top: 7px; padding-bottom: 7px; text-align: left !important}
.cr-ref {border: 2px solid red;}
.cr-top {border: 0px}
.cr-empty {color: white}
table.fixed { border-collapse: collapse; page-break-inside: avoid; table-layout:fixed; border: 1px solid black; width: 100% }
table.fixed td { overflow: hidden; border-collapse: collapse; }
I've added a link to a jsfiddle, where I've stripped down my code to a more simple example. Basically the rows with "Code Name UoSid etc.." are invoice lines and there can be one or more. I need the table to be of a certain size, but the rows should always be compactly stacked from the top down. In the jsfiddle you can see that they take up the whole table space and spread out evenly. In the masterpiece below you can see what I have on the left and what I need on the right.
It seems you are missing to apply style for TD in body of table. I would like to suggest you to option to solve issue :
If you want text-align left from top to down then add this to css :
.cr-tbody td{border-left:2px solid rgba(255,255,255,0);}
If you want text to be center in each td then add this to css:
.cr-tbody td{border-left:2px solid rgba(255,255,255,0);text-align:center;}
Hope this help you to solve your issue.
I want to make a table in html like given in the link Table
I have tried but didnt work.
MY CODE
.td1 {
background-color: #cccccc;
border: 2px solid black;
padding: 10px;
padding-bottom: 50px;
}
.td2 {
background-color: red;
border: 2px solid black;
padding: 10px;
}
.td3 {
background-color: green;
border: 2px solid black;
padding: 10px;
padding-bottom: 200px;
}
.td4 {
background-color: blue;
border: 2px solid black;
padding: 10px;
}
.td5 {
margin: 5px;
background-color: yellow;
border: 2px solid black;
padding: 10px;
}
.table {
border-collapse: separate;
border-spacing: 25px 5px;
margin: 5px;
border: 2px solid black;
}
<table width="100%" class="table">
<tr><td colspan="3" class="td1" align="center"> <b>DIV1</b>
</td></tr>
<tr><td class="td2" align="center" rowspan="3"><b>DIV2</b></td>
<td></td><td></td></tr>
<tr><td class="td3" align="center" rowspan="2"><b>DIV3</b></td>
<td></td></tr>
<tr><td class="td4" align="center"><b>DIV4</b></td></tr>
<tr><td colspan="3" class="td5" align="center"><b>DIV5</b>
</td></tr>
</table>
add this in your css
.table tr{
height:100px;
}
http://jsfiddle.net/uwokm8oq/1/
You can remove the "rowspan"-attribute, you already have a div inside your tds.
Give the 2nd tr a height in the css and to the three divs in the tds inside, add a height-attribute.
Have noticed that you have:
border-spacing: 25px 5px;
Change it to:
border-spacing: 5px 5px;
This spacing is for the distance between the borders of the cells.
Here you can read more about border-spacing!