I have a table mark-up that looks like the below:
-----------------
| a | b | c | d |
-----------------
On a different breakpoint, I would like the 'd' cell to shift below and go full width.
-------------
| a | b | c |
-------------
| d |
-------------
Is this possible with css?
You could use a media query and flexbox to override the default table styles.
table {
border-collapse: collapse;
display: block;
}
tr {
display: flex;
flex-wrap: wrap;
}
td {
border: 1px solid #ddd;
display: inline;
flex: 1;
padding: 5px 10px;
text-align: center;
}
td.d {
flex: 3;
flex-basis: 100%;
}
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td class="d">D</td>
</tr>
</table>
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 need to create a responsive table in HTML/CSS. I need that first cell of the row acts as a full row when the space becomes tight, just like below. In any situation, colums (c2, c3, c4) should remains vertically aligned (cells one below the other), just like a normal table. Any idea?
Normal view:
+-----------------------+--------+------+------+
| c1 | c2 | c3 | c4 |
+-----------------------+--------+------+------+
Mobile view:
+---------------------+
| c1 |
+---------+------+----+
| c2 | c3 | c4 |
+---------+------+----+
| c1 |
+---------+------+----+
| c2 | c3 | c4 |
+---------+------+----+
This can be done using a grid layout.
Here I am using JavaScript to toggle classes on and off to show how the styling can change. However, you can achieve the same effect
through media queries by not defining the span.mobile and .grid.mobile styles when the size is bigger than a specified breakpoint.
See this article for more information on how to make a responsive table using a grid.
const elements = document.querySelectorAll('.mobile');
setInterval(() => {
elements.forEach(el => el.classList.toggle('mobile'));
}, 1000);
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid black;
border-right: 1px solid black;
}
/* toggle below style with a media query */
.grid.mobile {
grid-template-columns: repeat(3, 1fr);
}
.grid > span {
padding: 4px 4px;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
/* toggle below style with a media query */
span.mobile {
grid-column: 1 /4;
font-weight: bold;
text-align: center;
}
<div class="grid mobile">
<span class="mobile">c1</span>
<span>c2</span>
<span>c3</span>
<span>c4</span>
<span class="mobile">c1</span>
<span>c2</span>
<span>c3</span>
<span>c4</span>
<span class="mobile">c1</span>
<span>c2</span>
<span>c3</span>
<span>c4</span>
</div>
Yes this is possible with media queries, but this particular approach is ugly and involves duplication.
Have a dedicated row for mobile. Hide and show this row with media queries. Use the same media query to hide the cell on mobile.
#table {
width: 100%;
}
.mRow {
display: none;
}
#media (max-width: 500px) {
.mRow {
display: table-row;
}
.dCell {
display: none;
}
}
<table id="table" cellspacing="0" border="1">
<!-- this row is hidden by default, shown with a media query -->
<tr class="mRow">
<td colspan="3">C1</td>
</tr>
<tr>
<!-- this cell hidden on mobile with a media query -->
<td class="dCell">C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<!-- this row is hidden by default, shown with a media query -->
<tr class="mRow">
<td colspan="3">C1</td>
</tr>
<tr>
<!-- this cell hidden on mobile with a media query -->
<td class="dCell">C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</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!
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;
}
I am creating a dynamic table generator, and during testing, I found that the following generated HTML gives an unexpected layout in all browsers (Firefox, Chrome, IE)
<table>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
I am expecting a 2x3 table, with top corner merged with the left cell in middle row, and and the middle row right cell merged with the bottom right cell but instead i ended up with a 2X2 grid
side note, even if I provided a height on the css or the row/cell attribute; doesn't change layout of the resulting table.
p/s i don't intend to use this for layouts; i just will like to idiot proof my codes from unintended effects from weird layouts such as this
Edit:
Expected:
|------|-------|
| | |
| | |
| |-------|
| | |
| | |
|------| |
| | |
| | |
|------|-------|
Result:
|------|-------|
| | |
| | |
|------|-------|
| | |
| | |
|------|-------|
Edit 2:
added CSS
table {
border: 2px solid #000000;
padding: 10px;
}
td {
border: 2px solid #FF0000;
height: 100px;
width: 100px;
padding: 10px;
}
tr {
border: 2px solid #00FF00;
padding: 10px
}
I also tried:
<table>
<tr>
<td rowspan="2" style="border: 1px solid #FF0000; height:200px"></td>
<td style="border: 1px solid #FF0000; height:100px"></td>
</tr>
<tr>
<td rowspan="2" style="border: 1px solid #FF0000; height:200px"></td>
</tr>
<tr>
<td style="border: 1px solid #FF0000; height:100px"></td>
</tr>
</table>