I have a table that gets loaded from a text file. The table is contained within a container div. I've styled the table, but when the table has too many columns for the width of the container div, the content overflows and is now scroll-able. This is not a problem, however, from the point where the overflow occurs, the styling for the table does not apply anymore.
Please have a look at the image:
The styling for this table is below:
table.static {
width: 100%;
margin-bottom: 0!important;
margin-top: 0!important;
}
table.static thead {
background: #D0D6DA;
border-bottom: 1px solid #aaa;
}
table.static thead tr th {
border-left: none;
border-right: none;
line-height: 30px;
padding: 0 10px;
text-align: left;
color: #333;
font-weight: 400;
text-shadow: 0 1px 0 #fff;
}
table.static tbody tr td {
line-height: 25px;
padding: 0 10px;
border: 0 solid #999;
}
table.static tbody tr td {
border-bottom: 1px solid #E1E5E7;
}
table.static tbody tr:last-child td {
border-bottom: 0;
}
table.static tbody tr.even td {
background-color: #EDF1F3;
border-bottom: 1px solid #D8DCDE;
}
table.static tbody tr td input,
table.static tbody tr td button {
margin: 10px 0;
}
Can anyone please explain why this is happening, and what I can do to fix it? Thank you
Try this
table.static {
min-width: 100%;
margin-bottom: 0!important;
margin-top: 0!important;
}
Related
I have a table inside an overflowing < div >. I am struggling to make bottom-border, either for the table or for the div, that will look nice. The current situation is: when overflowing, the bottom-border of the div looks nice. When not overflowing, it looks out of place. I have put the bottom-border on the table, when overflowing, it will obviously not show. I don't have any experience with JavaScript/Jquery/etc. and have tried to only use CSS for this so far.
#container {
width: 100%;
height: 0 auto;
overflow: auto;
}
#table_wrapper {
border-bottom: 1px solid #5C6F8C;
float: none;
overflow: auto;
height: 80vh;
width: 80%;
}
#test_table {
border-collapse: separate;
border-spacing: 0;
letter-spacing: 1px;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: calc(8px + 0.3vw);
text-align: center;
width: 100%;
/*border-bottom: 1px solid #5C6F8C;*/
}
#top_header {
border: 2px solid #5C6F8C;
border-right: 0px;
background-color: #ADBEDA;
}
caption {
background-color:white;
}
td, th {
border: 1px solid #5C6F8C;
border-right: 0px;
border-bottom: 0px;
padding: 5px 10px;
text-align: left;
}
tbody > tr:first-child > td {
border-top: 0px;
}
tbody > tr:first-child > th {
border-top: 0px;
}
th {
background-color: #ADBEDA;
}
tr:nth-child(even) {
background-color: #CFDDF5;
}
tr:nth-child(odd) {
background-color: #E3ECFD;
}
tr:hover {
background-color: #F0F5FF;
text-shadow:0px 0px 0.25px black;
}
<div id="container">
<div id="table_wrapper">
<table id="test_table">
<thead>
<th id="top_header">No.</th>
<th id="top_header">asdad.</th>
<th id="top_header">asdad</th>
</thead>
<tbody>
<tr><th>1</th><td>asdad</td><td>asdad</td></tr>
<tr><th>2</th><td>asdad</td><td>asdad</td></tr>
<tr><th>3</th><td>asdad</td><td>asdad</td></tr>
<tr><th>4</th><td>asdad</td><td>asdad</td></tr>
<tr><th>5</th><td>asdad</td><td>asdad</td></tr>
<tr><th>6</th><td>asdad</td><td>asdad</td></tr>
<tr><th>7</th><td>asdad</td><td>asdad</td></tr>
<tr><th>8</th><td>asdad</td><td>asdad</td></tr>
<tr><th>9</th><td>asdad</td><td>asdad</td></tr>
<tr><th>10</th><td>asdad</td><td>asdad</td></tr>
</tbody>
</table>
</div>
</div>
Better observable here, because the result screen can be resized:
https://jsfiddle.net/s43yuebt/2/
Can I achieve what I want by only using CSS?
use max-height on #table_wrapper
#table_wrapper {
border-bottom: 1px solid #5C6F8C;
float: none;
overflow: auto;
max-height: 80vh;
width: 80%;
}
#container {
width: 100%;
height: 0 auto;
overflow: auto;
}
#table_wrapper {
border-bottom: 1px solid #5C6F8C;
float: none;
overflow: auto;
max-height: 80vh;
width: 80%;
}
#test_table {
border-collapse: separate;
border-spacing: 0;
letter-spacing: 1px;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: calc(8px + 0.3vw);
text-align: center;
width: 100%;
/*border-bottom: 1px solid #5C6F8C;*/
}
#top_header {
border: 2px solid #5C6F8C;
border-right: 0px;
background-color: #ADBEDA;
}
caption {
background-color:white;
}
td, th {
border: 1px solid #5C6F8C;
border-right: 0px;
border-bottom: 0px;
padding: 5px 10px;
text-align: left;
}
tbody > tr:first-child > td {
border-top: 0px;
}
tbody > tr:first-child > th {
border-top: 0px;
}
th {
background-color: #ADBEDA;
}
tr:nth-child(even) {
background-color: #CFDDF5;
}
tr:nth-child(odd) {
background-color: #E3ECFD;
}
tr:hover {
background-color: #F0F5FF;
text-shadow:0px 0px 0.25px black;
}
<div id="container">
<div id="table_wrapper">
<table id="test_table">
<thead>
<th id="top_header">No.</th>
<th id="top_header">asdad.</th>
<th id="top_header">asdad</th>
</thead>
<tbody>
<tr><th>1</th><td>asdad</td><td>asdad</td></tr>
<tr><th>2</th><td>asdad</td><td>asdad</td></tr>
<tr><th>3</th><td>asdad</td><td>asdad</td></tr>
<tr><th>4</th><td>asdad</td><td>asdad</td></tr>
<tr><th>5</th><td>asdad</td><td>asdad</td></tr>
<tr><th>6</th><td>asdad</td><td>asdad</td></tr>
<tr><th>7</th><td>asdad</td><td>asdad</td></tr>
<tr><th>8</th><td>asdad</td><td>asdad</td></tr>
<tr><th>9</th><td>asdad</td><td>asdad</td></tr>
<tr><th>10</th><td>asdad</td><td>asdad</td></tr>
</tbody>
</table>
</div>
</div>
I'm styling 2 tables, one for desktop/tablet and one for mobile.
My problem lies that depending what table i define first, is the one that borrows some of the styles from other table.
css:
table.table-payments{
border-collapse: collapse;
width: 100%;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.04);
border-radius:5px;
box-shadow: var(--box-shadow-type-2);
}
table.table-payments > tr, thead, td, th {
padding:5px 15px;
text-align: left;
border-bottom: 1px solid var(--brand-light-gray-2);
border-radius: 5px;
font-size: var(--text-size);
height: 60px;
}
table.payments-mobile > tr, td, th{
text-align: left;
height: auto;
border: none;
}
table.payments-mobile > tbody{
background-color: var(--brand-white);
margin:5px 0;
border-radius: 4px;
box-shadow: var(--box-shadow-type-2);
}
image showing chrome style inspector
You're defining styles for elements generically in your css. You should be defining them more specifically, declaring the specific table for each element. So instead of:
table.payments-mobile > tr,
td,
th {
text-align: left;
height: auto;
border: none;
}
You should do:
table.payments-mobile > tr,
table.payments-mobile > td,
table.payments-mobile > th {
text-align: left;
height: auto;
border: none;
}
I'm working on putting alternating background color for columns in a table, and I have one working CSS code for a pretty simple table.
But when it gets a little bit complicated (with rowspan / colspan) my CSS code fails. Can someone help me here please? Guide me to which direction I should take to fix it?
The table codes I'm working on are all generated by someone else and I have no control over it. The tables they would make are all valid HTML codes, the CSS I need to make should work on them.
You can see my working / failing CSS code here:
http://www.cssdesk.com/u7ZUu
or
http://codepen.io/anon/pen/ORPLgz
table.specialtable {
border-top: 2px solid #00ABEF;
border-bottom: 2px solid #00ABEF;
background-colo: #FFF;
font-size: 11px;
}
table.specialtable th {
background-color: #B8E5FA;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
padding: 4px 2px;
}
table.specialtable td {
padding: 4px 2px;
text-align: center;
}
table.specialtable td:first-child {
text-align: left;
}
table.specialtable td:nth-child(even){
background-color: #E2F4FE;
}
table.specialtable td:nth-child(odd){
background-color: #FFF;
}
this is kinda crazy markup but it does what you're looking for. I got rid off some useless over specificity while at it, and I'm using SCSS, hope you don't mind.
I forked your pen here: http://codepen.io/memoblue/pen/yayBpA
Here's the relevant code:
table {
border-top: 2px solid #00ABEF;
border-bottom: 2px solid #00ABEF;
background-colo: #FFF;
font-size: 11px;
}
table th {
background-color: #B8E5FA;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
padding: 4px 2px;
}
table td {
padding: 4px 2px;
text-align: center;
}
table td:first-child {
text-align: left;
}
table td:nth-child(even){
background-color: #E2F4FE;
}
table td:nth-child(odd){
background-color: #FFF;
}
.specialtable ~ table {
tr:nth-child(2n) {
td:first-child {
background-color: #E2F4FE;
}
td:nth-child(2n) {
background-color: #fff;
}
&:nth-child(8) {
td:first-child {
background-color: #fff;
}
}
}
}
I need your help,
What used to work in IE7 was the below to freeze the top row (header) of an HTML table:
#data tr th {
top: expression(this.offsetParent.scrollTop);
position: relative;
}
It seems that this is no longer the case with IE10. That said, how can my existing coding be modified such that I would be able to freeze the top header row of my table like good old times lol
I've made a fiddle here: http://jsfiddle.net/8qq9Z/3/
Here is the CSS markup:
#data_container {
height: 160px;
border: 1px solid #808080;
scrollbar-base-color: #DFDFDF;
scrollbar-arrow-color: #235A81;
overflow-y: scroll;
overflow-x: scroll;
margin-top: 5px;
padding:0px;
position: relative;
}
#data {
color: rgb(11,63,113);
border: 0px;
width: 100%;
cursor: default;
table-layout: fixed;
margin:0px;
border:0px;
border-collapse:collapse;
}
#data th {
height: 18px;
cursor: pointer;
padding: 3px;
width: 140px;
border-top: none;
border-bottom: 1px solid rgb(128,128,128);
border-right: 1px solid rgb(128,128,128);
}
#data td {
padding: 3px;
border-right: 1px solid rgb(128,128,128);
border-bottom: 1px solid rgb(128,128,128);
}
#data th:hover {
text-decoration: underline;
}
#data tr th {
top: expression(this.offsetParent.scrollTop);
position: relative;
}
#data th:first-child {
border-left: 0;
}
I need your help,
How can I add a border-right: 1px solid #808080, to the last column header of my table? I am unsure and stuck as to what to modify or fix.
Here is my CSS and a paste Bin: http://pastebin.com/CEPVfd1z
CSS:
#wrapper {
height: 150px;
width: 800px;
border: 1px solid #808080;
position: relative;
overflow-y: scroll;
overflow-x: scroll;
scrollbar-base-color: #DFDFDF;
scrollbar-arrow-color: #235A81;
}
#data {
border-collapse: collapse;
border: 0;
width: 800px;
}
#data th {
border-left: 1px solid #808080;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
}
#data td {
border: 1px solid #808080;
}
#data tr:first-child th {
border-top: 0;
}
#data tr:last-child td {
border-bottom: 0;
}
#data tr td:first-child,
#data tr th:first-child {
border-left: 0;
}
Use #data th:last-child as the selector and then add the border-right property into that. Seems like you already know how to use :first-child and :last-child selectors, so I'm not going to explain.
http://jsfiddle.net/KgXuN/
#data th:last-child {
border-right: 2px solid red;
}