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!
Related
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>
Firstly, I realise that many question have been asked on this subject, but I have reviewed all of them (that I can find) and yet none of them appears to solve my problem.
I have a parent DIV (.timeline) that I want to hold a variable number of tables representing months/days. As I scroll horizontally I will dynamically add more months and this works, but I can't get the parent DIV to expand width to accommodate any new tables.
Here is the current HTML:
<div h-buffered-scroll="timeCtrl.adjustTimeline()" class="timeline">
<div class="wrapper">
<table ng-repeat="obj in timeCtrl.tLine">
<thead>
<tr>
<th class="monthhead" colspan="{{obj.days}}">
<div class="fixed">{{obj.monthYear}}</div>
</th>
</tr>
<tr>
<th ng-repeat="day in timeCtrl.dayRange(obj.days) track by $index">
{{$index+1}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="day in timeCtrl.dayRange(obj.days) track by $index"
id="{{obj.y}}_{{obj.m}}_{{$index+1}}"
ng-class="timeCtrl.isWorkDay('{{obj.y}}-{{obj.m}}-{{$index+1}}') ? 'work' : 'hol'">
</td>
</tr>
</tbody>
</table>
</div>
</div>
And here is the relevant CSS:
.timeline {
position: relative;
height: 90%;
width: 95%;
margin-left: 25px;
border: 1px solid #eee;
border-radius: 2px;
overflow-x: auto;
display: inline-block;
}
.timeline div {
min-width: 1000%;
height: 100%;
display: block;
}
.timeline > div > table {
height: 100%;
float: left;
table-layout: fixed;
}
I have the min-width:1000% just to set the parent wide enough to start with but ideally I expect I should not need to set a value for this is should just expand to fit however many child tables I create. What is happening is that the first two tables fit into the 1000% but then the next table (i.e. next month) then goes under the first two tables as it exceeds the width of the parent container.
Below is what I am trying to achieve:
+--------------------+
|+-----+ +----+ +----|--+ table 3 expands beyond parent div
|| 1 | | 2 | | 3 | | and should be able to scroll to see
|| | | | | | |
|+-----+ +----+ +----|--+
+------<-scroll->----+
I've tried to set the display to inline-block on the wrapper but this doesn't help
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;
}
So I have a table with some text and I want to truncate the text after a certain length. I've achieved this using text-overflow.
.overflow {
width: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
When clicking the table cell I want the whole text to be shown (by changing the height of the row). Like this:
+------------------+ +------------------+
| Header | | Header |
+------------------+ +------------------+
| First text block | --> | First text block |
+------------------+ +------------------+
| A long text b... | | A long text |
+------------------+ | block |
^click +------------------+
I've managed to do that as well.
But I also want to place a + sign after the "..." to show the user that the cell is clickable!
+--------------------+
| Header |
+--------------------+
| First text block |
+--------------------+
| A long text b... + |
+--------------------+
How can I do this? I tried using :after but that only added the + after the whole text.
What I've got so far: http://jsfiddle.net/6qLcrswc/1/
Thanks!
You can just set position absolute on your pseudo-element :
$(".overflow").click(function() {
$(this).toggleClass("overflow");
});
table,
td {
border: 1px solid black;
}
td {
width: 70px;
}
td .overflow {
width: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 10px;
}
div {
position: relative;
}
div::after {
position: absolute;
content: " +";
bottom: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="overflow">A long textfield</div>
</td>
</tr>
<tr>
<td>
<div class="overflow">Another long textfield</div>
</td>
</tr>
<tr>
<td>
<div class="overflow">The third long textfield</div>
</td>
</tr>
</table>
I advise you to use cursor:pointer; to show the user that the cell is clickable.
To put "+" after that you can do that setting position:relative; to div and absolute to the ::after pseudo selector and managing with right and top.
UPDATE: Exactly like Mehdi wrote
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>