I need your help.
It seems that my TD cell is not respecting the overflow: hidden in the CSS. I've done everything recommended with the fixed layout of the table as well as specifying the widths of the TH's and TD's
Any ideas?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-collapse:collapse;
border-spacing: 0;
table-layout: fixed;
}
table th {
padding:10px 10px 10px 10px;
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
width: 160px;
background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-left: 0;
}
table tr {
text-align: center;
}
table td:first-child {
text-align: left;
border-left: 0;
}
table td {
padding:10px;
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
background: #fafafa;
width: 130px;
}
table tr:last-child td {
border-bottom: 0;
}
table tr:hover td {
background: #f2f2f2;
}
#wrapper {
width: 740px;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid rgb(205,205,205);
}
table thead {
position:fixed;
}
table td > div {
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<!-- Table Header -->
<thead>
<tr>
<th>Task Details</th>
<th>Firstname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>Create</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>Take the dog</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>Waste half</td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td><div>Feel inferior</div></td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td><div>Some long text that shouldn't resize the box</div></td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td><div>Vow to complete</div></td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>Procrastinate</td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Hyperlink Example</td>
<td> </td>
<td>80%</td>
<td>Another</td>
</tr>
</tbody>
<!-- Table Body -->
</table>
</div>
</body>
</html>
You just needed to get rid of the white-space here
table td > div {
overflow: hidden;
white-space: nowrap;
}
and I added colgroups. They are better for setting widths in your columns and avoid issues
DEMO
Related
My current table data is look like image1 how can make it to become the image2 the data look like card? I tried the border-radius CSS, but it still looks same nothing changes. I think the current data look very messy so I think change to card row data will become better...
table {
border: 1px solid #ccc;
width: 100%;
margin:0;
padding:0;
border-collapse: collapse;
border-spacing: 0;
}
table tr {
border: 2px solid #eee;
border-radius: 25px;
padding: 20px;
}
table th, table td {
padding: 10px;
text-align: center;
}
table th {
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}
<table v-if="items.length >0">
<thead>
<th>{{$t('date')}}</th>
<th>{{$t('description')}}</th>
<th>{{$t('previousBalance')}}</th>
<th>{{$t('debit')}}</th>
<th>{{$t('credit')}}</th>
<th>{{$t('balance')}}</th>
</thead>
<tbody v-for="(item) in items" :key="item">
<tr>
<td :data-label="$t('date')">{{item.txDate}}</td>
<td :data-label="$t('description')"> {{item.txDesc}}</td>
<td :data-label="$t('previousBalance')">{{item.txBalBefore}}</td>
<td :data-label="$t('debit')" v-if="item.txAmount <=0">{{ item.txAmount }}</td>
<td :data-label="$t('debit')" v-else>0.00</td>
<td :data-label="$t('credit')" v-if="item.txAmount > 0">{{item.txAmount}}</td>
<td :data-label="$t('credit')" v-else>0.00</td>
<td :data-label="$t('balance')">{{item.txBalAfter}}</td>
</tr>
</tbody>
</table>
I can't try your snippets. but please take a look if this is what you are expecting.
body{
box-sizing: border-box
border: 1px solid #ddd;
}
table {
font-family: Arial, Helvetica, sans-serif;
border-collapse:separate;
border-spacing:0 15px;
width: 100%;
border: none
}
table td, #customers th {
padding: 20px;
}
table tr {background-color: #eaeefa;}
table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #d9dff3;
}
td:first-child,
th:first-child {
border-radius: 10px 0 0 10px;
}
td:last-child,
th:last-child {
border-radius: 0 10px 10px 0;
}
<table id="customers">
<tr>
<th>Name</th>
<th>Age</th>
<th>Role</th>
</tr>
<tr>
<td>Temitope</td>
<td>12</td>
<td>Accountant</td>
</tr>
<tr>
<td>Alfred</td>
<td>23</td>
<td>Designer</td>
</tr>
<tr>
<td>Bello</td>
<td>14</td>
<td>Painter</td>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>Architect</td>
</tr>
<tr>
<td>James</td>
<td>10</td>
<td>Manager</td>
</tr>
</table>
Let me know if you have any questions
I have an .xsl file to create 4 tables. Problem is: the contents of all the tables will be inserted automatically through an .xml file, so they are not fixed. In the example below, I insert certain contents and you see the widths of all the tables are not equal, the tables also do not stay in the middle of the page.
How should I update my CSS part below, so that with any inserted contents, all 4 tables have the same width and stay in the middle of the page?
.frame {
font-family: Verdana;
}
.div1 {
margin-right:80px;
margin-left:80px;
}
.div2 {
margin-right:80px;
margin-left:80px;
}
.div3 {
margin-right:80px;
margin-left:80px;
}
.div4 {
margin-right:80px;
margin-left:80px;
}
.table1 {
width: 760px;
margin: 0 auto;
border-collapse: collapse;
font-weight: bold;
}
.table1 td {
vertical-align: top;
padding-left: 6px;
padding-bottom: 5px;
border: 1px solid black;
width: 380px;
}
.table1 tr:nth-child(2) td {
border: none;
}
.table2 {
width: 760px;
margin: 0 auto;
border-collapse: collapse;
}
.table2 th {
vertical-align: top;
border: 1px solid black;
text-align: left;
padding-left: 6px;
font-weight: bold;
background-color: rgb(0,116,188);
color: white;
}
.table2 td {
vertical-align: top;
padding-left: 6px;
padding-bottom: 5px;
border: 1px solid black;
}
.table2 tr:nth-child(1) td {
border: none;
}
.table2 tr:nth-child(2) td {
border: none;
}
.table2 tr:nth-last-child() td {
border: none;
}
.table2 tr:nth-last-child(1) td {
border: none;
}
.table3 {
vertical-align: top;
width: 760px;
margin: 0 auto;
border-collapse: collapse;
}
.table3 th {
vertical-align: top;
border: 1px solid black;
text-align: left;
padding-left: 6px;
font-weight: bold;
background-color: rgb(0,116,188);
color: white;
}
.table3 td {
vertical-align: top;
padding-left: 6px;
padding-bottom: 5px;
border: 1px solid black;
}
.table3 tr:nth-child(1) td {
border: none;
}
.table3 tr:nth-child(2) td {
border: none;
}
.table3 tr:nth-child(3) td {
border: none;
}
.table3 tr:nth-child(4) td {
border: none;
}
.table3 tr:nth-child(5) td {
border: none;
}
.table3 tr:nth-last-child() td {
border: none;
}
.table3 tr:nth-last-child(1) td {
border: none;
}
.table4 {
vertical-align: top;
width: 760px;
margin: 0 auto;
border-collapse: collapse;
}
.table4 th {
vertical-align: top;
border: 1px solid black;
text-align: left;
padding-left: 6px;
font-weight: bold;
background-color: rgb(0,116,188);
color: white;
}
.table4 td {
vertical-align: top;
padding-left: 6px;
padding-bottom: 5px;
border: 1px solid black;
}
.table4 tr:nth-child(1) td {
border: none;
}
.table4 tr:nth-child(2) td {
border: none;
}
<div class="frame">
<div class="div1">
<table class="table1" style="margin-top:20px">
<tr>
<td>Contract</td>
<td>ABC XYZ</td>
</tr>
<tr>
<td> <br/> </td>
<td> <br/> </td>
</tr>
<tr>
<td>Informations about Patients of</td>
<td>Dr. William Hills (ID: 123456789)</td>
</tr>
<tr>
<td>Quartal/Year of treated Patient</td>
<td>Q4-2016</td>
</tr>
<tr>
<td>Treatment carried out by</td>
<td>Dr. William Hills (ID: 123456789)</td>
</tr>
<tr>
<td>Start date Import</td>
<td>201610011335</td>
</tr>
<tr>
<td>Quantity of enrolled Patients</td>
<td>126</td>
</tr>
</table>
</div>
<br/>
<br/>
<div class="div2">
<table class="table2" style="font-size:12pt">
<tr>
<td colspan="7" style="font-weight: bold; color:rgb(0,116,188)">Changes of following patients</td>
</tr>
<tr>
<td colspan="7"/>
</tr>
<tr>
<th>Name</th>
<th>Birthday</th>
<th>Insurance No.</th>
<th>Contractstatus</th>
<th>Begin date</th>
<th>End date</th>
<th>Reason</th>
</tr>
<tr>
<td>Frank Harrison</td>
<td>01.12.1959</td>
<td>G987654321</td>
<td>
<b>Activated</b>
</td>
<td>
<b>01.04.2017</b>
</td>
<td/>
<td/>
</tr>
<tr>
<td>Peter Smith</td>
<td>04.12.1969</td>
<td>G543267sfgsfgsgdgdfgssgs7895642gfdfsfsfsd89</td>
<td>
<b>Terminated</b>
</td>
<td>01.01.2016</td>
<td>
<b>31.03.2017</b>
</td>
<td>Cancelled</td>
</tr>
<tr>
<td colspan="7"> Some notations here</td>
</tr>
</table>
</div>
<br/>
<br/>
<div class="div3">
<table class="table3" style="font-size:12pt">
<tr>
<td colspan="6" style="margin-left:80px; font-weight:bold; color:rgb(0,116,188)">Title of second table</td>
</tr>
<tr>
<td colspan="6"/>
</tr>
<tr>
<td colspan="6">101 Dalmatians is a 1996 American live-action family comedy film based on Walt Disney's animated 1961 movie adaptation of Dodie Smith's 1956 novel The Hundred and One Dalmatians. Directed by Stephen Herek and co-produced by John Hughes and Ricardo Mestres, it stars Glenn Close, Hugh Laurie, Mark Williams, Tim McInnerny, Jeff Daniels and Joely Richardson. In contrast with the 1961 film, none of the animals talk in this version. Released on November 27, 1996 by Walt Disney Pictures, the film was praised for its faithfulness to the animated classic. It received mixed reviews, but was a commercial success, grossing $320.6 million in theaters against a $75 million budget. </td>
</tr>
<tr>
<td colspan="6"/>
</tr>
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<th>Name</th>
<th>Birthday</th>
<th>Insurance No.</th>
<th>Office</th>
<th>Date for Q4-2016</th>
<th>Reason</th>
</tr>
<tr>
<td>Adolph_Blaine_Charles_David_Earl_Frederick_Gerald_Hubert_Irvin_ John Kenneth Lloyd Martin Nero Oliver Paul</td>
<td>04.12.1969</td>
<td>G543996789</td>
<td>Activated<br/>
<b>01.07.2016</b>
</td>
<td>Activated<br/>
<b>01.04.2016</b>
<br/>
</td>
<td/>
</tr>
<tr>
<td>Peter Tester</td>
<td>01.12.1959</td>
<td>G987677321</td>
<td>
<b>Activated</b>
<br/>01.01.2016</td>
<td>
<b>Terminated</b>
<br/>
<b>01.01.2016</b>
<br/>
<b>30.06.2016</b>
</td>
<td>Late feedback about changing the residence</td>
</tr>
<tr>
<td colspan="6"> Some notations here</td>
</tr>
</table>
</div>
<br/>
<br/>
<div class="div4">
<table class="table4" style="font-size:12pt">
<tr>
<td colspan="4" style="font-weight: bold; color:rgb(0,116,188)">Title of third table</td>
</tr>
<tr>
<td colspan="4"/>
</tr>
<tr>
<th>Name</th>
<th>Birthday</th>
<th>Insurance No.</th>
<th>Notice</th>
</tr>
<tr>
<td>Fritz Ford</td>
<td>30.01.1965</td>
<td>D555555555</td>
<td>PTD</td>
</tr>
</table>
</div>
</div>
A quick and dirty solution would be to add table-layout:fixed;width:100% on all your tables. This way, the width will always be 100% and the table cell contents would wrap. Keep in mind that adding table-layout:fixed will make all table-cells have equal width.
Of course if your tables are too long you would need javascript to achieve what you are after.
I have a table in which I have to separate a row using border as in image below.
As you can see, Border separator is having a space left-right side and not fully touched to table border.
I tried giving padding,margin but nothing worked.
tr {
border-bottom: 1px solid blue;
padding: 10px; // not working
margin: 10px; // not working
}
https://jsfiddle.net/alpeshprajapati/s934Lpbx/
What is the way to achieve this?
CSS
table {
border: 1px solid black;
border-collapse: collapse;
}
thead {
background: black;
color: white;
}
th {
width: 100px;
}
tr {
float: left;
border-bottom: 1px solid blue;
width: 90%;
margin: 0 10px;
}
td{
width: 32%;
float: left;
}
Try this:
table {
border: 1px solid black;
border-collapse: collapse;
}
thead {
background: black;
color: white;
}
th {
width: 100px;
}
tr {
// border-bottom: 1px solid blue;
}
td{
padding:5px 10px;
}
.border{
background:skyblue;
width:100%;
height:2px;
}
<table>
<thead>
<th>Th1</th>
<th>Th2</th>
<th>Th3</th>
</thead>
<tbody>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
<tr>
<td colspan="3">
<div class="border"></div>
</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
<tr>
<td colspan="3">
<div class="border"></div>
</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
</tbody>
</table>
To increase the length of the border you have to increase the width of the div that is containing it.
Hello for some reason I have a button that is breaking the bottom border that I have already set in place for my table. I eventually want to do this for all of my rows, but I would like to know how to prevent that from happening. Each row in my table should have a button, but I'd like to keep my borders intact.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td>$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>
So, you must put button into td, because it's in table, but you're applying the border-bottom property to td so you have border under button, if you want to remove it you can add a class no-border and apply it to td in which you have your button so look at code, and you'll have only two columns have border, or another solution is to add <td></td> or <th></th> where appropriate into every <tr>that has no button.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
.no-border{
border:none;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td class="no-border"><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td>$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>
Problem: Uneven number of column inside each row.
Solution: Either enter blank <td></td> or use colspan.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td colspan="2">$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>
I need your help.
Whenever the user scrolls down the table, both the top and bottom borders of the table header disappear. Once the user reaches the bottom of the table,
the top and bottom borders of the table header re-appear. How do you fix this? I am using IE7 and need the code to compliant to that particular browser.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-radius:3px;
border-collapse:collapse; border-spacing: 0;
box-shadow: 0 1px 2px #d1d1d1;
}
table th {
padding:10px 10px 10px 10px;
border-top:1px solid #ccc;
_border-bottom:1px solid #ccc;
border-right: 1px solid #ccc;
background: #ededed;
}
table tr {
text-align: center;
}
table td {
padding:10px;
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background: #fafafa;
}
table tr:hover td {
background: #f2f2f2;
}
table th, table td {
width: 160px;
}
#container {
width: 740px;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
border-left: 1px solid #ccc;
}
table tr td:first-child, table tr th:first-child {
border-left: 0;
}
table thead {
_position:fixed;
position: relative;
}
table thead tr {
position: relative;
top: expression(this.offsetParent.scrollTop);
}
table tr:first-child td {
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="container">
<table id="data">
<!-- Table Header -->
<thead>
<tr>
<th>Task Details</th>
<th>Firstname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>Create pretty table design</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>Take the dog for a walk</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>Waste half the day on Twitter</td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td>Feel inferior after viewing Dribble</td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Wince at "to do" list</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td>Vow to complete personal project</td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>Procrastinate</td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Hyperlink Example</td>
<td> </td>
<td>80%</td>
<td>Another</td>
</tr>
</tbody>
<!-- Table Body -->
</table>
</div>
</body>
</html>
After playing around with some of the css with a new set of eyes the next day, the following works for IE7:
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-radius:3px;
border-collapse:collapse; border-spacing: 0;
box-shadow: 0 1px 2px #d1d1d1;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
table th {
padding:10px 10px 10px 10px;
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
background: #ededed;
}
table tr {
text-align: center;
}
table td {
padding:10px;
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
background: #fafafa;
}
table tr:hover td {
background: #f2f2f2;
}
table th, table td {
width: 160px;
}
#container {
width: 800px;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}
table tr td:first-child, table tr th:first-child {
border-left: 0;
}
table thead {
position:fixed;
}
TABLE THEAD TR TH {
top:expression(this.offsetParent.scrollTop);
border-top:1px solid #ccc;
position:relative;
}
table tr:first-child td {
border-top: 0;
}
</style>
Hai I just modified your CSS code right below please try this.
table thead {
position:fixed;
}
table thead tr {
position: relative;
}