I am having trouble getting the text centered in the middle of the cell, the single lines are fine but the double lines do not get in the center of the cell :
I have a simpler version on JSfiddle of my code but with all the css that I use.
When I remove the plan-list-view-table class (for the FIXED header) the vertical align works, but I cant get around the display:block without breaking the fixed header.
The code that is breaking the vertical align in particular:
#plan-list-view-table tr:after { /* clearing float */
content: ' ';
display: block;
clear: both;
}
You can use flexbox properties on the td
#plan-list-view-table thead,
#plan-list-view-table tbody,
#plan-list-view-table tfoot,
#plan-list-view-table tr,
#plan-list-view-table th,
#plan-list-view-table td {
display: block;
}
#plan-list-view-table thead tr,
#plan-list-view-table tfoot tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
#plan-list-view-table tr:after {
/* clearing float */
content: ' ';
display: block;
/*visibility: hidden;*/
clear: both;
}
.table-responsive>.table>tbody>tr>td {
vertical-align: middle;
}
#plan-list-view-table tbody {
height: 65vh;
}
#plan-list-view-table tbody td,
#plan-list-view-table thead th,
#plan-list-view-table tfoot td {
width: 16.70%;
float: left;
}
#plan-list-view-table tbody td {
/* height: 50px; */
}
#plan-list-view-table thead th {
height: 35px;
}
/* Every odd column has a light grey color */
#table-body tr {
background-color: rgba(224, 224, 224, 0.3);
}
/* Hover on plan entry */
#table-body tr:hover {
background-color: rgba(233, 233, 234, 1);
cursor: pointer;
}
/* Green checkbox for "Published" column */
#table-body tr td.green {
color: green;
}
/* Red checkbox for "Published" column (Not working)*/
#table-body tr td.fade {
color: red;
}
/* Right delimiter between plans in the plan list*/
#table-head-data tr th,
#table-body tr td {
border-right: thin solid rgb(224, 224, 224);
background: transparent;
vertical-align: middle;
}
.table-responsive>.table>tbody>tr>td {
vertical-align: middle;
}
.table-responsive {
overflow: auto;
/*margin-bottom:20px;*/
}
.table {
border-left: 0px;
width: 100%;
table-layout: fixed;
text-align: center;
font-family: 'Lato', sans-serif;
}
.planListItem td {
display: flex !important;
justify-content: center;
align-items: center;
height: 50px;
}
<div class="table-responsive" id="table-res">
<table class="table" id="plan-list-view-table">
<thead id="table-head-data">
<tr>
<th> Name <span class="glyphicon"></span></th>
<th> Description <span class="glyphicon"></span></th>
<th> Start <span class="glyphicon"></span></th>
<th> End <span class="glyphicon"></span></th>
<th> Published Date <span class="glyphicon"></span></th>
</tr>
</thead>
<tbody id="table-body" #plantable>
<tr class="planListItem">
<td style="overflow: hidden;">Test</td>
<td style="overflow: hidden;">TestDoubleLine TestDoubleLine TestDoubleLine</td>
<td style="overflow: hidden;">3 TestDoubleLine oubleLine</td>
<td style="overflow: hidden;">4</td>
<td style="overflow: hidden;">5</td>
</tr>
</tbody>
</table>
</div>
not sure of all side effects but these are working (note commented-out css):
#plan-list-view-table tbody {
/* height: 65vh; */
}
#plan-list-view-table thead, #plan-list-view-table tbody,
#plan-list-view-table tfoot, #plan-list-view-table tr,
#plan-list-view-table th, #plan-list-view-table td {
/* display: block; */
}
#plan-list-view-table tbody td, #plan-list-view-table thead th,
#plan-list-view-table tfoot td {
/* float: left; */
width: 16.7%;
}
Related
I want to make a responsive table, The table has 4 columns (4x1) in a row, and want to show 2 columns in a row in max-width: 600px [mobile screen] (2x2), my code is running but has 4x4. How to correct css. Output should be look like this.
Desktop -
---- ---- ---- ----
A B C D
---- ---- ---- ----
Mobile
---- ----
A B
---- ----
---- ----
C D
---- ----
table {
width: 100%;
border-collapse: collapse;
background: rgb(196, 215, 70)
}
tr:nth-child(2n) {
background: lightblue;
}
th, :before {
background: tomato;
box-shadow: inset 0 0 0 2px;
}
th, td {
box-shadow: inset 0 0 0 2px;
text-align: center;
vertical-align: middle;
padding: 0.5em;
vertical-align: middle;
}
#supports (display: contents) {
/* trick works if data-time attributes stands in html and if display:contents is supported */
#media screen and (max-width: 768px) {
table {
display: flex;
flex-flow: column;
}
thead, tr, tbody {
display: contents;
}
tr th:first-child {
display: none;
}
th {
background: red;
}
td {
display: table;
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
td:before {
content: attr(data-time);
border-right: solid 1px;
display: table-cell;
vertical-align: middle;
white-space: pre;
/* only if you care */
padding: 0.25em;
}
tr :nth-child(2) {
order: 0;
}
tr :nth-child(3) {
order: 1;
}
tr :nth-child(4) {
order: 2;
}
tr :nth-child(5) {
order: 3;
}
tr :nth-child(6) {
order: 4;
}
tr :nth-child(7) {
order: 5;
}
}
}
<table>
<tbody>
<tr>
<td>
<p>A</p>
</td>
<td>
<p>B</p>
</td>
<td>
<p>C</p>
</td>
<td>
<p>D</p>
</td>
</tr>
</tbody>
</table>
I am working in Angular Project but stuck in a design Issue
I am want to scroll the body of the table making body header fixed
I tried to do the at but not able to scroll just table body
My code and design is ready I have put it in below link -
https://stackblitz.com/edit/angular-x8c89j?file=src%2Fapp%2Fapp.component.html
Please update your table style as below
table {
width: 100%;
}
table, td {
border-collapse: collapse;
border: 1px solid #000;
}
thead {
display: table;
width: calc(100% - 17px);
}
tbody {
display: block;
max-height: 200px;
overflow-y: scroll;
}
th, td {
padding: 5px;
word-break: break-all;
}
tr {
display: table;
width: 100%;
box-sizing: border-box;
}
td {
text-align: center;
border-bottom: none;
border-left: none;
}
tr th:first-child,
tr td:first-child {
width: 100px;
}
I want to fix the tfoot to the bottom of the page with it being as responsive as the rows of the table.
My code: https://codepen.io/adu8/pen/MWWXqGY
The problem I face now is once I add the class="fixed-bottom" to the tr of tfoot, it goes to bottom and gets misaligned.
I tried fixing it with having a workaround by adding this css:
tfoot td {
display: inline-block;
width: calc((100%/8) - 10px);
}
As in this codepen: https://codepen.io/adu8/pen/dyyKqOv. However, it's still not able to be as responsive.
I would appreciate if someone helps fixing this.
Please use this CSS
body {
background-color: midnightblue;
color: white;
}
table {
max-width: 100%;
font-size: 2vw;
}
thead, tr, tfoot {
text-align: center;
background-color: midnightblue;
}
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
background-color: darkslateblue;
}
.table-hover tbody tr:hover > th {
/*background-color: #06765d;*/
background-color: #009999;
}
.table td {
padding: 0.05rem;
margin: 0px;
}
.fixed-bottom {
width: 100%;
}
table tr {
display: flex; display: -webkit-flex;
width: 100%;
}
tr th,
tr td {
width: calc(100% / 8);
}
tr th:first-child,
tr td:first-child {
width: 22%;
flex-shrink: 0;
-webkit-flex-shrink: 0;
}
I have a page with a table, which is updated periodically. The table has a heading, followed by a number of rows. Each row has 3 fields: Player position, Player name (also a link to the player's profile), and the player's time. The table takes up the entire page width.
The html looks like this:
<table id="raceTable">
<tbody>
<tr><th colspan="3">3 Players</th></tr>
<tr><td>1st</td><td><a>Link to profile of player A</a></td><td>00:22:12</td></tr>
<tr><td>2st</td><td><a>Link to profile of player B</a></td><td>00:23:12</td></tr>
<tr><td>3st</td><td><a>Link to profile of player C</a></td><td>00:24:15</td></tr>
</tbody>
</table>
Now, I want to make the table scalable. If the user changes the width of the window, the table should be resized, the text in the middle column should be clipped when it doesn't fit.
This is the CSS I've tried:
body{
overflow: hidden;
}
table {
width:100%;
line-height: 50px;
border-collapse: collapse;
}
th {
height: 50px;
width: 100%;
background-color: magenta;
}
td {
height: 50px;
}
#raceTable {
width: 100%;
}
#raceTable > tbody > tr:not(:first-child) > td:nth-child(1) {
padding: 10px;
background-color: red;
float: left;
}
#raceTable > tbody > tr:not(:first-child) > td:nth-child(2) {
width: 100%;
background-color: gray;
}
#raceTable > tbody > tr:not(:first-child) > td:nth-child(2) > a{
display: block;
background-color: white;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#raceTable > tbody > tr:not(:first-child) > td:nth-child(3) {
padding: 10px;
background: green;
float: right;
}
And I have a JSFiddle of it all here: http://jsfiddle.net/Gikkman/5wpts61p/17/
My question is, how do I make text-overflow: ellipsis; to work for the link text in the middle column of the table? I cannot change how the HTML of the site is structured, I can only apply CSS. Is this possible?
In table, text-overflow: ellipsis; only works with fixed table layout, normally you can just apply:
#raceTable {
table-layout: fixed;
width: 100%;
}
But it looks like you also want to have dynamic width for the columns. In that case you can wrap the <a> with a <div> to create a CSS fixed table layout structure, then apply the text overflow on it.
#raceTable td:nth-child(2) div {
display: table;
table-layout: fixed;
width: 100%;
}
#raceTable td:nth-child(2) a {
display: table-cell;
background-color: white;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#raceTable {
line-height: 50px;
border-collapse: collapse;
width: 100%;
}
#raceTable th {
height: 50px;
background-color: magenta;
}
#raceTable td {
height: 50px;
}
#raceTable td:nth-child(1) {
padding: 10px;
background-color: red;
/* float: left; */
}
#raceTable td:nth-child(2) {
width: 100%;
background-color: gray;
}
#raceTable td:nth-child(2) div {
display: table;
table-layout: fixed;
width: 100%;
}
#raceTable td:nth-child(2) a {
display: table-cell;
background-color: white;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#raceTable td:nth-child(3) {
padding: 10px;
background: green;
/* float: right; */
}
<table id="raceTable">
<thead>
<tr>
<th colspan="3">3 Players</th>
</tr>
</thead>
<tbody>
<tr>
<td>1st</td>
<td><div><a>Link to profile of player A, Link to profile of player A, Link to profile of player A</a></div></td>
<td>00:22:12</td>
</tr>
<tr>
<td>2st</td>
<td><div><a>Link to profile of player B</a></div></td>
<td>00:23:12</td>
</tr>
<tr>
<td>3st</td>
<td><div><a>Link to profile of player C</a></div></td>
<td>00:24:15</td>
</tr>
</tbody>
</table>
after reconsidering my comment, I would still advise to style your table with table-layout:fixed; and reset default display on a as you did, but build it with a little more table elements.
https://www.w3.org/wiki/HTML/Elements/colgroup
https://www.w3.org/WAI/UA/TS/html401/cp1001/1001-COL-COLGROUP.html
table {
width:100%;
table-layout:fixed;
line-height:50px;
}
thead {background:green;}
td {width:100%;}
col {background:gray;}
col:first-child, col:last-child {
width:4em;
background:red;
}
col:last-child {
background:cyan;
}
a { display:block;
background-color: white;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width:100%;}
<table id="raceTable">
<colgroup>
<col/>
<col/>
<col/>
</col>
<thead>
<tr>
<th colspan="3">3 Players</th>
</tr>
</thead>
<tbody>
<tr>
<td>1st</td>
<td><a>Link to profile of player A</a></td>
<td>00:22:12</td>
</tr>
<tr>
<td>2st</td>
<td><a>Link to profile of player B</a></td>
<td>00:23:12</td>
</tr>
<tr>
<td>3st</td>
<td><a>Link to profile of player C Link to profile of player C Link to profile of player C</a></td>
<td>00:24:15</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/bn2trf2o
What happens here is the colspan attribute on th and table-layout:fixed; that shares evenly the columns.
To avoid this confusion, you can use the colgroup and col tags to init each width for each columns. Size first and last , the middle will use all space left.You can use them also to set a background defaut color for each columns. it will be hidden as soon as you set a bg on any other elements(like thead does in the snippet)
edit
from your structure , a display reset on trs could do :
table,
tr {
width: 100%;
table-layout: fixed;
line-height: 50px;
border-spacing: 0;
}
tr {
display: table;
}
th {
background: magenta
}
td {
background: gray;
}
td:first-child,
td:last-child {
width: 30px;
background: red;
}
td:last-child {
background: cyan;
width: 100px;
}
a {
display: block;
background-color: white;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<table id="raceTable">
<tbody>
<tr>
<th colspan="3">3 Players</th>
</tr>
<tr>
<td>1st</td>
<td><a>Link to profile of player A</a></td>
<td>00:22:12</td>
</tr>
<tr>
<td>2st</td>
<td><a>Link to profile of player B</a></td>
<td>00:23:12</td>
</tr>
<tr>
<td>3st</td>
<td><a>Link to profile of player C Link to profile of player C Link to profile of player C</a></td>
<td>00:24:15</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/bn2trf2o/1/
I'm trying to get a new page up containing a responsive table, using the code below. I've put the code in its own class 'resptable' but for some reason its affecting all tables (even ones not in any class) throughout my site. I can't seem to find why. Any help would be appreciated, thank you!
The CSS -
/*
Generic Styling, for Desktops/Laptops
*/
.resptable table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
.resptable tr:nth-of-type(odd) {
background: #eee;
}
.resptable th {
background: #333;
color: white;
font-weight: bold;
}
.resptable td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
#media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
.resptable table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.resptable thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.resptable tr { border: 1px solid #ccc; }
.resptable td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
.resptable td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
.resptable td:nth-of-type(1):before { content: "First Name"; }
.resptable td:nth-of-type(2):before { content: "Last Name"; }
.resptable td:nth-of-type(3):before { content: "Job Title"; }
.resptable td:nth-of-type(4):before { content: "Favorite Color"; }
.resptable td:nth-of-type(5):before { content: "Wars of Trek?"; }
.resptable td:nth-of-type(6):before { content: "Porn Name"; }
.resptable td:nth-of-type(7):before { content: "Date of Birth"; }
.resptable td:nth-of-type(8):before { content: "Dream Vacation City"; }
.resptable td:nth-of-type(9):before { content: "GPA"; }
.resptable td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
And here is the HTML:
<table class="resptable">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
</tr>
</tbody>
</table>
Such selector:
.resptable table, thead, tbody, th, td, tr
points to:
.resptable table,
thead,
tbody,
th,
td,
tr
So, just first selector in a list has your class resptable. Others are points to every thead, tbody, th, td, tr elements (without your class resptable).
And other point is that you table has resptable class. So, table is not in .resptable but table is .resptable:
table.resptable
I believe you was trying to write another one:
table.resptable,
.resptable thead,
.resptable tbody,
.resptable th,
.resptable td,
.resptable tr