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>
Related
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..
One cell in a large table needs to be split into 2 equal-width 'columns'. I realize I can use colspan, but rather than have every other cell in the table span so that this one cell is split, I'm looking for inline-or-CSS alternatives, like float, etc. Here is a screenshot of what I'm trying to get:
Just put two spans or divs in the cell and use css to style them.
table {
with: 100%;
}
td div {
display: inline-block;
width: 50%;
padding: 5px;
box-sizing: border-box;
}
td div:first-child {
background-color: blue;
}
td div:last-child {
background-color: yellow;
}
<table>
<tbody>
<tr>
<td>Normal cell</td>
<td><div>Split</div><div>Cell</div></td>
<td>Normal cell</td>
</tr>
</tbody>
</table>
I want that a table column uses the minimum of place but after a certain width, it should wrap.
Here is what I have:
<table id="#table">
<tr>
<td>Content with a fix with</td>
<td class="min">This content should only use the necessary place but wrap after 200px</td>
</tr>
</table>
<style>
#table{
width: 100%;
}
.min {
width: 1%;
white-space: nowrap;
}
</style>
This makes the column use only the place which it needs but it it ets too long, it will make the table endless longer and I want to set the maximum of the allowed space.
Edit:
I think that with js it would be possible to calculate the width and change the css but I would prefer a solution without javascript or jquery.
Edit 2: I forgot to mention that the table has a width of 100%. So if I follow the given answer, the table cell has its autowidth (which is too wide) and a max-width so if the text is short, the td has a white space which I do not want.
Edit 3: Here is an image which explains better than me.
#billTable{
width:100%;
}
#numberTd{
text-align: center;
width:18%;
}
#weightTd{
text-align: center;
width:20%;
}
#nameTd{
text-align: left;
width: 1%;
white-space: nowrap;
}
#kgPriceTd{
text-align: right;
width:20%;
}
#priceTd {
text-align: right;
}
<div style="width:550px;">
<table>
<tr>
<th id='numberTd'>Packetzahl</th>
<th id='weightTd'>Kg</th>
<th id='nameTd'>Artikel</th>
<th id='kgPriceTd'>CHF / Kg</th>
<th id='priceTd' colspan="2">Total</th>
</tr>
<tr>
<td id='numberTd'>1</td>
<td id='weightTd'>0.688</td>
<td id='nameTd' class='min'>Siedfleisch</td>
<td id='kgPriceTd'>44.00</td>
<td id='priceTd'>8.2</td>
</tr>
</table>
</div>
You can control max width of an element by using max-width
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.
.min {
max-width: 200px;
}
<table>
<tr>
<td>Content with a fix with</td>
<td class="min">This content should only use the necessary place but wrap after 200px</td>
</tr>
</table>
You can apply width in percentages for the flexible columns, space it out so it looks good or make your table not 100%
Use the CSS property "max-width". I've attached an example with a border that shows this in use.
table, td {
border:1px solid #555;
border-collapse:collapse;
}
.min {
max-width:200px;
}
<table>
<tr>
<td>Content with a fix with</td>
<td class="min">This content should only use the necessary place but wrap after 200px</td>
</tr>
</table>
I need flexible lenght of first two columns when i'm entering text, but fixed lenght of third column and that table doesn't leave div element (but doesn't move the div). Third column is on right side of the div element. In the first column to fit all text entered, second how many can fit. Second column field can ends with "...". Sorry for my bad english. code - jsfiddle.net/17s8gz3L
My code:
<div>
<table border="1">
<tr>
<td>textbssanssadsadasdacccccccccccc</td>
<td>textsasas</td>
<td>text</td>
</tr>
<tr >
<td>textsadasdadadsads</td>
<td>text</td>
<td>textsasasd</td>
</tr>
</table>
<div>
table{
width:100%;
overflow:hidden;
}
td:last-of-type {
float:right;
}
td{
overflow:hidden;
white-space:nowrap;
}
div{
border:1px solid red;
width:60%;
}
Adding classes and styling those should do the trick.
Can't remember the exact CSS attributes but you should do something like:
In html:
<tr>
<td class='col1'></td>
<td class='col2'></td>
<td class='col3'></td>
<tr>
<tr>
<td class='col1'></td>
<td class='col2'></td>
<td class='col3'></td>
<tr>
In css:
div{
border:1px solid red;
width:60%;
}
div.col1{
width:auto;
}
div.col2{
width:auto;
}
div.col3{
width:20%;
//change the 20% to whatever static width you need use % or px, i recommend using %.
}
Say I have a table with only three small columns. It looks untidy and unbalanced to have a narrow, tall table hugging the left side of my screen (example), so I'd like the table to cover the width of the page. However, when I set the table width to 100%, all the columns are stretched out as well, so now my data is spread thinly across the screen, which also looks untidy (example).
What I'm looking for is a solution where all the columns have the same size as they would have had if the table was width: auto, but the final column fills the remaining space on the screen. This is what Spotify does, for example:
The "User" column will cover the remaining width, no matter what. Is there a relatively simple way of achieving this with HTML tables and CSS?
I have found a simple solution:
table td:last-child {
width: 100%;
}
Result:
body {
font: 12px sans-serif;
}
table {
width: 100%;
background-color: #222222;
color: white;
border-collapse: collapse;
}
table th {
padding: 10px;
text-align: left;
}
table td {
padding: 2px 10px;
}
table td:last-child {
width: 100%;
}
table td:nth-child(odd), table th:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.05);
}
table tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.05);
}
table tr:last-child td {
padding-bottom: 10px;
}
<table>
<tr>
<th>Product</th>
<th>Cardinality</th>
<th>Price per item</th>
</tr>
<tr>
<td>Apple</td>
<td>5</td>
<td>$2</td>
</tr>
<tr>
<td>Pear</td>
<td>3</td>
<td>$3</td>
</tr>
<tr>
<td>Sausage</td>
<td>10</td>
<td>$0.5</td>
</tr>
<tr>
<td>Pineapple</td>
<td>2</td>
<td>$8</td>
</tr>
<tr>
<td>Tomato</td>
<td>5</td>
<td>$1</td>
</tr>
<tr>
<td>Lightsaber</td>
<td>2</td>
<td>$99 999</td>
</tr>
</table>
This appears to work in my current scenario, but it looks like something that can cause unwanted side effects in other situations. If I stumble across any, I'll edit this answer.
Possible side effects
Multi-word table cells will be wrapped into multiple lines to keep the column as narrow as possible. One solution is to use white-space: nowrap on the table cells, but that will hinder cells with lots of text from wrapping when they should.
If this is what you meant:
Then I can achieve that using standard html table structure with the following css:
table {
width:auto;
}
td {
white-space:nowrap;
}
td:last-child {
width:100%;
}
--EDIT : work with your jsfiddle