Hello I want to add borders inside a table, and in the bottom of the table. With what i found, i was able to add the inner borders, however, i am getting trouble in adding also the bottom border. How can i do it ?
My table
<table class="table">
<thead>
<tr>
<th>Produto</th>
<th>Quantidade</th>
<th>Valor</th>
</tr>
</thead>
<tbody>
<tr v-for="c in compras">
<td>{{c.nome}}</td>
<td>{{c.qtd}}</td>
<td>{{c.valor}}</td>
</tr>
</tbody>
</table>
And the Css i have, that managed to fill the inner borders
table {
border-collapse: collapse;
border-style: hidden;
}
table td, table th {
border: 1px solid black;
border-bottom: 1px solid black;
}
Thank You
table {
border: 1px solid black;
border-bottom: 1px solid black;
}
exactly the same which you used for the inners
I have this date format 2019-09-13 14:36:06 which I want to insert in table cell such that date comes in first line and time comes in second line like this
2019-09-13
14:36:06
I tried the following css on table cell for this purpose
td{
white-space:pre;
}
But what I am getting is this
2019-
09-13
14:36:06
Probably the result you get is due to the actual width that is within your cell (thus its size).
This is the example:
table { border:solid 1px; }
table tr { border:solid 1px; }
table tr td { border:solid 1px; }
td {
max-width: 55px;
}
<table>
<tr>
<td>2019-09-13 14:36:06</td>
</tr>
</table>
If you want try with white-space:pre; you need to have the date in your HTML already formatted in two lines, and the formatting will be respected.
table { border:solid 1px; }
table tr { border:solid 1px; }
table tr td { border:solid 1px; }
td {
text-align:center;
white-space: pre;
}
<table>
<tr>
<td>2019-09-13 14:36:06</td>
</tr>
<tr>
<td>
2019-09-13
14:36:06
</td>
</tr>
</table>
To my knowledge, however, there are no other pure CSS solutions (perhaps as a very clever hack). The alternative is to use Javascript but it does not seem to be included in your request.
I think it has two way to implement ur question..
1.Add this html code..
<table>
<tbody>
<td><span>2019-09-13</span> <span>14:36:06</span></td>
</tbody>
</table>
css
td span {
display: block;
}
2.If its possible, then plz reduce the width of the td..
I am working on a legacy web page that use a table layout (that unfortunately I can't replace with a new pure HTML\CSS layout) and I have the following problem.
I have a situation like this:
<table class="externalTable">
<tr id="firstRow">
<td>
<div>
<table id="tablistOn">
<!-- SOME ROWS ARE SHOWED -->
</table>
</div>
</td>
<td>SECOND td</td>
<td>THIRD td</td>
</tr>
</table>
I need to applied a bottom-border property only to the #firstRow row and I do in this way:
.externalTable #firstRow td, .externalTable #firstRow th {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
but doing in this way the problem is that this style is applied also at all the tows inside the internal table rows (the one having id="tablistOn").
I think that I can override it defining a new style for this table but I am asking if I can apply my style only to the external table selecting only the class="externalTable" table but not its inner table id="tablistOn".
How can I do it in some way?
Tnx
You're using descendant selectors, which will match all children within an element. What you need are child selectors - > - which will only select direct descendants of an element.
.externalTable #firstRow>td, .externalTable #firstRow>th {
border-top:1px solid red;
border-bottom:1px solid red;
}
More information on child
selectors
More information on descendant selectors
More information on selectors in
general
Try doing this:
.externalTable #firstRow td, .externalTable #firstRow th {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
#firstrow table td {
border: none;
}
Regards.
You can write two ways to solve this.
1.
#externalTable td{
// One Style
}
#tablistOn td{
// One Style
}
2
#externalTable td:not(#tablistOn td) {
// Styles
}
I am making a form in html, and I am using a table for layout of my input controls and labels.
For each input of a form, there is one label associated with it.
I want a border to appear around each pair of adjacent cell that is a label and its associated input tag.
I tried making a div around the two adjacent <td> tags but it says "invalid tag" as only <td> are allowed inside a <tr> tag.
Is there anyway to do it either in CSS or anything else ?
My HTML sample code :
<table>
<tr>
<td>Date</td>
<td><input type="text"></td>
<td>Name</td>
<td><input type="text"></td>
</tr>
</table>
Below is a screenshot of what I want to achieve.
You've not collapsed your table border, try this
Demo
table {
border-collapse: collapse;
}
table, td {
border: 1px solid #c00000;
}
If you could apply classes to your td's you could try this:
<table cellspacing="0">
<tr>
<td class="label">Label1: </td>
<td>input1</td>
<td class="label">Label2: </td>
<td>input2</td>
</tr>
</table>
With the following css:
table {
background-color: silver;
border-collapse: collapse;
}
td {
padding: 5px;
border: 1px solid red;
border-width: 1px 1px 1px 0px;
}
td.label {
border-width: 1px 0px 1px 1px;
}
http://jsfiddle.net/H3p8e/2/
Try to apply border-collapse:collapse; rule.
I have a table of 3 by 3. I need a way to add a border for the bottom of every row tr and give it a specific color.
First I tried the direct way, i.e.:
<tr style="border-bottom:1pt solid black;">
But that didn't work. So I added CSS like this:
tr {
border-bottom: 1pt solid black;
}
That still didn't work.
I would prefer to use CSS because then I don't need to add a style attribute to every row.
I haven't added a border attribute to the <table>. I hope that that is not affecting my CSS.
Add border-collapse:collapse to your table rule:
table {
border-collapse: collapse;
}
Example
table {
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid black;
}
<table>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
Link
I had a problem like this before. I don't think tr can take a border styling directly. My workaround was to style the tds in the row:
<tr class="border_bottom">
CSS:
tr.border_bottom td {
border-bottom: 1px solid black;
}
Use border-collapse:collapse on table and border-bottom: 1pt solid black; on the tr
Use
border-collapse:collapse as Nathan wrote and you need to set
td { border-bottom: 1px solid #000; }
There are lot of incomplete answers here. Since you cannot apply a border to tr tag, you need to apply it to the td or th tags like so:
td {
border-bottom: 1pt solid black;
}
Doing this will leave a small space between each td, which is likely not desirable if you want the border to appear as though it is the tr tag. In order to "fill in the gaps" so to speak, you need to utilize the border-collapse property on the table element and set its value to collapse, like so:
table {
border-collapse: collapse;
}
You can use the box-shadow property to fake a border of a tr element. Adjust Y position of box-shadow (below represented as 2px) to adjust thickness.
tr {
-webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}
I tried adding
table {
border-collapse: collapse;
}
alongside the
tr {
bottom-border: 2pt solid #color;
}
and then commented out border-collapse to see what worked. Just having the tr selector with bottom-border property worked for me!
No Border CSS ex.
No Border Photo live
CSS Border ex.
Table with Border photo live
Use
table{border-collapse:collapse}
tr{border-top:thin solid}
Replace "thin solid" with CSS properties.
Display the row as a block.
tr {
display: block;
border-bottom: 1px solid #000;
}
and to display alternate colors simply:
tr.oddrow {
display: block;
border-bottom: 1px solid #F00;
}
Another solution to this is border-spacing property:
table td {
border-bottom: 2px solid black;
}
table {
border-spacing: 0px;
}
<table>
<tr>
<td>ABC</td>
<td>XYZ</td>
</table>
If you don't want to
enforce border collapse on the table
use the TD elements styling
You can use the ::after selector to add borders to TR :
table tbody tr {
position : relative; # to contain the ::after element within the table-row
}
table tbody tr td {
position : relative; # needed to apply a z-index
z-index : 2; # needs to be higher than the z-index on the tr::after element
}
table tbody tr::after {
content : '';
position : absolute;
z-index : 1; # Add a z-index below z-index on TD so you can still select data from your table rows :)
top : 0px;
left : 0px;
width : 100%;
height : 100%;
border : 1px solid green; # Style your border here, choose if you want a border bottom, top, left, etc ...
}
It is a simple trick that I used in a scenario where I had to put spaces between table-rows so I wasn't able to add a border collapse on the table, the end result :
Hope it helps :)
I found when using this method that the space between the td elements caused a gap to form in the border, but have no fear...
One way around this:
<tr>
<td>
Example of normal table data
</td>
<td class="end" colspan="/* total number of columns in entire table*/">
/* insert nothing in here */
</td>
</tr>
With the CSS:
td.end{
border:2px solid black;
}
<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">
You can do the same to the whole row as well.
There is border-bottom-style, border-top-style,border-left-style,border-right-style. Or simply border-style that apply to all four borders at once.
You can see (and TRY YOURSELF online) more details here
Several interesting answers. Since you just want a border bottom (or top) here are two more. Assuming you want a blue border 3px thick. In the style section you could add
.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}
In the table code either
<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>
No CSS border bottom:
<table>
<thead>
<tr>
<th>Title</th>
</tr>
<tr>
<th>
<hr>
</th>
</tr>
</thead>
</table>
You can't put a border on a tr element. This worked for me in firefox and IE 11:
<td style='border-bottom:1pt solid black'>
HTML
<tr class="bottom-border">
</tr>
CSS
tr.bottom-border {
border-bottom: 1px solid #222;
}