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..
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>
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>
I'm going to try to explain myself.
I would like to achieve this:
I need to create a table with 4 columns and many td (lines).
But, I need the single lines to have automatic column width based on their content.
Normally, this is what happens with columns, the largest td (line) dictate the size of the column in which is contained:
Instead. I am trying to achieve this:
I want to still organise elements in a Table (columns) so that I can organise the content for ex. by alphabetic properties.
BUT I need the columns to look like this:
Any Ideas?
You can set display:inline for the columns (<td>). A better alternative would be to use <div> and flexbox.
td {
border:2px solid red;
display: inline;
}
td:nth-child(1) {
background:yellow;
}
td:nth-child(2) {
background:blue;
}
td:nth-child(3) {
background:grey;
}
td:nth-child(4) {
background:orange;
}
table {
border:1px dashed black;
}
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>Ant</td>
<td>Bear</td>
<td>Cat</td>
<td>Dog</td>
</tr>
</table>
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>
Can I place a background image using CSS on a <tr> tag? Will this background image show across all browsers?
HTML:
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
table {
width:300px;
height:200px;
border:3px solid blue;
}
tr {
background-image:url(http://dummyimage.com/300x200/f00/000);
display: block;
height: 100%;
}
Live demo: http://jsfiddle.net/simevidas/Jk5BE/5/
Source: http://code.google.com/p/chromium/issues/detail?id=44361
For this to work, you have to set the row height. In my demo, I've set it to 100%, because there is only one row in my table. If you have multiple row, set the height of the row to the height of the background-image.
Yes. And it'll show on all modern browsers.
You can either use the background attribute or do it with CSS.
If you're using it for HTML emails, then it won't show in Outlook 2007 or later, as they use Microsoft Word as the rendering engine. Why? God knows. But they do.
This is tricky. It looks to me like the background image applied in CSS to a tr element gets repeated on each table cell even if you say don't repeat. So if the image isn't a simple gradient with right to left symmetry, you may not get what you expect. Here is an example:
http://jsfiddle.net/Bx998/1/
HTML
<table id="tbl1">
<tr>
<td>one</td><td>two</td><td>three</td><td>four</td><td>five</td><td>size</td>
</tr>
<tr>
<td>one</td><td>two</td><td>three</td><td>four</td><td>five</td><td>size</td>
</tr>
</table>
CSS
#tbl1 tr{
background: transparent url('http://www.google.com/images/logos/ps_logo2.png') no-repeat;
}
#tbl1 tr td{
padding: 5px;
height: 50px;
border: 1px solid #888;
}
#tbl1 tr td:first-child{
padding: 0 0 0 50px;
}