Well basically I have a css table that looks like this
-------------------------------------------------------------
| First | Middle1 | Middle2 | Last |
-------------------------------------------------------------
I'm looking to get this design
-------------------------------------------------------------
| First | Middle1 | Middle2 | Last |
-------------------------------------------------------------
First column is aligned to left, middle columns are aligned to center, and last column is aligned to right. Currently I'm using a solution that targets :first-child and :last-child in order to align them specifically. Is there a better/smarter way?
Align attributes are now deprecated. They still work in terms of aligning content but generally should not be used. Use CSS pseudo-element selectors to target the first and last cell in each row.
td {
text-align: center;
}
tr td:first-child {
text-align: left;
}
tr td:last-child {
text-align: right;
}
Use the td align attribute:
td {
min-width:100px;
border:1px solid black;
}
<table>
<tr>
<td align="left">Left</td>
<td align="center">Center</td>
<td align="center">Center</td>
<td align="right">Right</td>
</tr>
</table>
Using CSS:
td {
text-align: center;
}
td:nth-child(1)
{
text-align: left;
}
td:nth-child(4)
{
text-align: right;
}
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
I'm trying to make a table css that should change the row color if a cell in that row is empty
As far as I can see there is "empty":
<style type="text/css">
td:empty {
background-color: red;
}
</style>
Is there a way to change all the row color and not just the cell?
This is my actual table style:
<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: black;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: black;
}
.tg .tg-yofg {
background-color: #9aff99;
text-align: left;
vertical-align: top
}
.tg .tg-7od5 {
background-color: #9aff99;
border-color: inherit;
text-align: left;
vertical-align: top
}
.tg .tg-m9y7 {
background-color: #ffffc7;
text-align: left;
vertical-align: top;
border-left: 3px solid red;
}
#media screen and (max-width: 767px) {
.tg {
width: auto !important;
}
.tg col {
width: auto !important;
}
.tg-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
</style>
My concern:
Does it exist?
IF yes: can I use it in my style?
If it exists but I cannot use it in my style, what should I change?
But mostly, as always when I try something out of my knowledge, is really this approach the best approach?
Just 2 lines as background:
I'm using python with jinja2 template to print an HTML table based on a python dictionary. I merge two dictonaries into one and then "jinja" it. It works, but I want to highlight the differences between them, the actual result:
|dict1-el1 | dict1-el2 | dict2-el1 | dict2-el2|
|-----------------------------------------------|
| a | b | | a | b |
| | f | | d | f |
| t | z | | t | z |
I would like the second row highlighted
This table has to be send by mail.
the column of dict1 are already styled with a color and the columns of the dict2 with another (in my case I have 7 column per dict).
A very BAD solution I thought was to pass not only the values "a", "b", etc etc to jinja, but to store in the merged dictionary itself the syle css name. I can then use python to chose the cell color. But before this I wonder if a css solution could easily exists.
Please give priority to css question.
Thanks
In CSS is not possibile, in javascript you could loop over all the rows, look for any empty cell and, if found, apply a class on the row
var rows = document.querySelectorAll('tr');
[...rows].forEach((r) => {
if (r.querySelectorAll('td:empty').length > 0) {
r.classList.add('highlight');
}
})
.highlight td {
background: yellowgreen;
}
<table cellspacing="0">
<tr>
<td>1</td>
<td></td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td></td>
<td>12</td>
</tr>
</table>
I have tables like this:
------------------------------------------------
| product-name | icon | text |
------------------------------------------------
| product-info | icon | text |
------------------------------------------------
I want my cells to be flexible according to the last cell content:
------------------------------------------------
| product-name | ic | smt |
------------------------------------------------
| product-info | ic | smt |
------------------------------------------------
-------------------------------------------------
| product-name | icon | big-text |
-------------------------------------------------
| product-info, bla bla bla...| icon | text |
-------------------------------------------------
I tried this css:
table {
table-layout: fixed;
font-size: 12px;
width: 100%;
}
table td:nth-child(1) {
max-width: 70%;
}
table td:nth-child(2) {
width: 10%;
}
table td:nth-child(3) {
max-width: 20%;
}
I put table-layout:fixed, but I can't manage to make the max-width to work. And I don't know how to tell that the last cell is the one to determine the others size.
The product-info content can be very big and I applied an ellipsis it become too large.
The first thing to do is get rid of table-layout: fixed, because that does the opposite of what you want. For the rest, if you want tables to be flexible, don't try to force widths on them!
There's a little trick to make some table cells as wide as their content, while giving the remaining cells the rest of the remaining space: make their width 1px and make sure that they can't wrap by setting white-space: nowrap. Then the rest will come naturally.
table {
border: 1px outset;
width: 100%;
}
th, td {
border: 1px inset;
}
table td:nth-child(2),
table td:nth-child(3) {
white-space:nowrap;
width: 1px;
}
<table>
<tr>
<td>product-name</td>
<td>ic</td>
<td>smt</td>
</tr>
<tr>
<td>product-info</td>
<td>ic</td>
<td>smt</td>
</tr>
</table>
<br>
<table>
<tr>
<td>product-name</td>
<td>icon</td>
<td>big-text</td>
</tr>
<tr>
<td>product-info, bla bla bla...</td>
<td>ic</td>
<td>smt</td>
</tr>
</table>
Hope this is what you meant!
I am making a table, where I don't know the number of columns beforehand. Since the first column is wider than the others, I know the width for it. I would like to make the other columns smaller, with same width for each column. How can I make a table layout, where if I have 3 columns for example, first one the wider, and the others smaller, how can I align these columns, so that they take up the space in the table to the left, and leave the left space on the right.
So, the layout would look something like this:
column1 | column2 | column3
-----------------------------------------------------------------
value1 | 2 | 3
-----------------------------------------------------------------
Also, I am not sure how to achieve this, since I am also aligning the content of all the columns but the first one to the right. And I need the last column to take the whole space of the table, because I should show the bottom border all the way to the end of the table layout.
I only have very little css for this table so far:
.table {
tr {
td:last-child {
border-left: dashed 2px gray;
}
td {
text-align: right;
}
td:first-child {
text-align: left;
width: 40%;
}
}
}
I am not sure how can I achieve the desired layout?
You can achieve this using flex and a meta element ::after for the last col like this:
.mytable {
width: 100%;
}
tr {
display: flex;
}
tr:after {
content: '';
flex-grow: 1;
border-left: 1px solid #000;
border-bottom: 1px dashed #000;
}
td {
width: 100px;
border-left: 1px solid #000;
border-bottom: 1px dashed #000;
text-align: right;
}
td:first-child {
width: 200px;
border-left: 0;
text-align: left;
}
<table class="mytable">
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td>value1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<h3>A table with more columns also works:</h3>
<table class="mytable">
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
<td>column4</td>
<td>column5</td>
</tr>
<tr>
<td>value1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
You can achieve this by setting the width of the first td to 100%. It will use all the available space. You can guarantee a minimum width to the other tds using some min-width
I am using Google Chrome to render this HTML page:
<html>
<style>
table {
width: 100%;
}
table, td, th {
border: 1px solid black;
text-align: left;
}
td {
vertical-align: top;
}
</style>
<body>
<table>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
<tr>
<td>Bobby</td>
<td>100</td>
</tr>
</table>
</body>
</html>
Above code works fine. Problem is, I want the first column to not resize its width past the width of the longest content width in any row hosted in that column. For example, when I resize the window, I get this:
*---------------------------*---------------------------*
|Name |Value |
*---------------------------*---------------------------*
|Bobby |100 |
*---------------------------*---------------------------*
But I want it to be like this:
*-----*-------------------------------------------------*
|Name |Value |
*-----*-------------------------------------------------*
|Bobby|100 |
*-----*-------------------------------------------------*
How can this be done?
PS: I still want to preserve the way the entire table takes up 100% width of the window.
Just set the width of the :first-child to 1px and it should update the width according to the content.
table th:first-child,
table td:first-child {
width: 1px;
}
http://jsfiddle.net/sbeliv01/ehpvrzk0/
Could try tinkering with percentage based widths to adhere to the table's width
tr th,
tr td {
width: 90%;
/* adjust this if the "label" column needs to be longer */
}
tr th:first-child,
tr td:first-child {
width: auto;
}
http://jsfiddle.net/25pjqva4/
Just add to your first-child column width:auto property.
table tr td:first-child {
width:auto;
}
I'm trying to achieve table similar to this using css/html only. Is it possible ?
So the white area is the places table. This is the HTML for the table :
<table class="places">
<tr>
<td class="solid">K</td>
<td> </td>
<td> </td>
<td class="solid">P</td>
<td> </td>
</tr>
<tr>
<td class="solid">25</td>
<td class="solid">26</td>
<td> </td>
<td class="solid">47</td>
<td class="solid">48</td>
</tr>
(...)
</table>
And my css :
.places{
position:relative;
background:white;
width:160px;
margin:0 auto;
text-align:left;
padding:5px;
border-collapse: collapse;
}
.places tr {
}
.places td {
width:22px;
height:22px;
text-align:center;
}
.solid {
border: 1px solid #d2cdd1;
border-top:none;
background-color:#e7e7e7;
text-align:center;
cursor:pointer;
}
I was pretty sure, that although tables are a bit different than other html objects, padding should work here. But it looks that I was wrong. Cellspacing/cellpading have no effect. Currently I was able to get something looking like this :
You need the border-spacing property.
Table cells are not like other elements, because while div and p gets are block level elements, and span and input are inline, table cells and rows get their own table-cell and table-row display values.
Using border-spacing with border-collapse: separate will give you what you'd need. Have a look: http://jsfiddle.net/kjag3/1/
PS. I've also taken the liberty of cleaning up the HTML by separating them into two tables, so you won't need the fillers for the empty cells.
The reason you can't set any spacing between the cells is that you have border-collapse set to collapse in the styles for your table. If you use border-collapse:separate instead, you should be able to add margins to your table cells and put spacing between them.
Using border-collapse:collapse makes it so that adjacent table cells use the same border; naturally, you wouldn't be able to put space between two elements when they're attached to each other.
I wonder whether a table structure is appropriate for what you're trying to achieve?
To me, it looks like the 'K' and 'P' are headings, and the gap between the 'K' and 'P' numbers suggests that 'K' and 'P' are separate and shouldn't be part of the same table. So I suggest getting rid of the table and restructuring your HTML to use simple headings and div tags like this:
HTML:
<div class="places">
<h2>K</h2>
<div>25</div>
<div>26</div>
<div>23</div>
<div>24</div>
<div>21</div>
<div>22</div>
</div>
<div class="places">
<h2>P</h2>
<div>47</div>
<div>48</div>
<div>45</div>
<div>46</div>
<div>43</div>
<div>44</div>
</div>
CSS:
.places {
width: 55px;
float: left;
margin: 0 25px 0 0;
}
.places h2, .places div {
width: 22px;
height: 22px;
margin: 0 3px 3px 0;
border: 1px solid #d2cdd1;
border-top:none;
background-color:#e7e7e7;
text-align:center;
cursor:pointer;
font-weight: normal;
font-size: 12pt;
}
.places div {
float: left;
}