How do I create space in HTML between tables?
What tag do I need for that?
Use the [selector] + [selector] css selector to specify any table that comes right after another table. In this case, table + table { margin-left: 1em; }, where you replace 1em with whatever size you want to specify.
Example code:
table {
display: inline;
border-spacing: 0;
}
td, th {
border: thin solid black;
}
/* the important part: */
table + table {
margin-left: 1em;
}
<table>
<thead><tr><th>column 1</th></tr></thead>
<tbody>
<tr><td>first item</td></tr>
</tbody>
</table>
<table>
<thead><tr><th>column 1</th></tr></thead>
<tbody>
<tr><td>another item</td></tr>
</tbody>
</table>
Related
I have multiple tables on a website. In case the table has multiple rows, then each cell should be bordered which is solved now with td {border: 1px solid black;}. But if the table only has one single row, I would like to hide the borders or have the border-width be 0.
Without changing the HTML or using JS, is there a way to accomplish this purely with CSS?
Add a selector for a single row.
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
}
table tbody tr:only-child td { /* The override. */
border: none;
}
<table>
<tbody>
<tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>
<br>
<table>
<tbody>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>5</td></tr>
</tbody>
</table>
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 have a table with two rows, where there is one h1 heading in the left column. The two other columns is normal paragraphs with strong text.
The two right columns in first row goes alright, but on the second row there is too much vertical space between them. It is pretty obvious that it is the h1 which increases the vertical space between them. But how can I fix that, if possible at all? Do I really need to leave the h1 out of the table?
table {
width: 80%;
margin-left: 2%;
border-collapse: separate;
border-spacing: 0 1px;
}
<table>
<tr>
<td><h1>Some big text</h1></td>
<td><p><strong>Some</strong></p>
<td><p><strong>smaller text</strong></p></td>
</tr>
<tr>
<td></td>
<td><p><strong>Here come</strong></p></td>
<td><p><strong>Second row</strong></p></td>
</table>
That spacing is most likely from the default margin on the h1 and p tags, reset them and see.
table {
width: 80%;
margin-left: 2%;
border-collapse: separate;
border-spacing: 0 1px;
}
td {
border: 1px solid aqua; /*for demo purpose*/
}
table h1, table p {
margin: 0; /*reset the margin*/
}
<table>
<tr>
<td><h1>Some big text</h1></td>
<td><p><strong>Some</strong></p>
<td><p><strong>smaller text</strong></p></td>
</tr>
<tr>
<td></td>
<td><p><strong>Here come</strong></p></td>
<td><p><strong>Second row</strong></p></td>
</tr>
</table>
Edit: I figured out (see comments below) what OP refers about the border spacing. It's both the empty <td>, and the border-collapse style. To combine those two <td>s, you can use rowspan. To get rid of the small space amount the lines, use border-collapse:collapse.
table {
width: 80%;
margin-left: 2%;
border-collapse: collapse; /*set it to collapse*/
}
td {
border: 1px solid aqua; /*for demo purpose*/
}
table h1, table p {
margin: 0;
}
<table>
<tr>
<td rowspan="2"><h1>Some big text</h1></td>
<td><p><strong>Some</strong></p></td>
<td><p><strong>smaller text</strong></p></td>
</tr>
<tr>
<td><p><strong>Here come</strong></p></td>
<td><p><strong>Second row</strong></p></td>
</tr>
</table>
Try removing the margin from the h1 like so.
h1 {
margin: 0;
}
There are two things you can do. First, is making the h1 smaller in height, by reducing its margin and its parent padding.
Also, you can use the rowspan attribute in the td which contains your h1 instead of having a empty td on the second row.
The HTML:
<table>
<tr>
<td rowspan="2"><h1>Some big text</h1></td>
<td><p><strong>Some</strong></p>
<td><p><strong>smaller text</strong></p></td>
</tr>
<tr>
<td><p><strong>Here come</strong></p></td>
<td><p><strong>Second row</strong></p></td>
</table>
And the CSS:
table {
width: 80%;
margin-left: 2%;
border-collapse: separate;
border-spacing: 0 1px;
}
table tr td {
padding: 0;
}
table tr td h1 {
margin: 0;
}
table tr td p {
margin: 0;
}
Hello all I'm just trying to have my border around my table cell right around the text...not stretched the length of the entire table. Its the section with the border around it
CSS:
table.content_table {
width: 100%;
margin: 0px;
border-collapse: collapse;
}
table.content_table > tbody > tr > td.results {
border: 2px solid;
background-color: #eeeecc;
font-size: 8pt;
font-weight: bold;
PADDING: 0px;
}
HTML:
<table class="content_table">
<br/><br/>
<h1>Planned Vs Actual Productions Drilldown</h1>
<tr>
<td class="results">
Number of results returned: ${fn:length(beans)}
</td>
</tr>
give the text a simple span or any other block element like div p ... span with inline-block is also a block element which can have a border.
table.content_table {
width: 100%;
margin: 0px;
border-collapse: collapse;
}
.border {
border: 2px solid;
background-color: #eeeecc;
font-size: 8pt;
font-weight: bold;
PADDING: 0px;
display: inline-block;
}
Any Element inside a table needs to be in TD so that is is valid html... put another tr > td into your table like this
<table class="content_table">
<tr>
<td>
<h1>Planned Vs Actual Productions Drilldown</h1>
</td>
</tr>
<tr>
<td class="results">
<span class="border">Number of results returned: ${fn:length(beans)}</span>
</td>
</tr>
</table>
The answer lies in the fact that you have table width as 100%. Without any of styling at the TD level, the TD is automatically going to take the most width it can.
The bigger question though, is why you are using a table at all. This is a single column of data, no need for a table here, just use div's.
I had a similar problem with a WordPress theme. The "collapse" wasn't entirely working on the first column, because my theme's style.css "reset" had set the table width to 100%. At least for me, the "auto" width solved the problem.
<style>
table#donations { border-collapse: collapse; width:auto; }
</style>
<table id="donations">
<tr><td>Bitcoin BTC</td><td>1Prh5VnUJRQV3sARhEfQAMKv9UzGqgAMXg</td></tr>
</table>
Consider the following code:
HTML:
<table>
<tr>
<td>Hello</td>
<td>Stack</td>
<td>Overflow</td>
</tr>
<tr>
<td>some</td>
<td>text</td>
<td>here</td>
</tr>
</table>
CSS:
table {
border-spacing: 40px 10px;
border-collapse: separate;
}
tr:first-child {
background-color: #aaa;
}
td {
padding: 5px;
}
I would like the background color on the first row to be between the cells also.
How could I do this ?
I'm sorry but according to this (the last paragraph of section 17.5.1), the background between the cells when you use "border-collapse: separate" is the background of the table element.
This is not possible when using border-spacing, but you could try using individual cell padding instead...
table {
border-collapse: separate;
}
tr:first-child td {
background-color: #aaa;
}
td {
padding: 10px 40px;
}
Live demo available here