Here's my css properties for a table. I want to fix the width of a certain column and hide the overflow. I tried on all the columns but i can't seem to make it work.
.celltable2 table {
table-layout:fixed;
font-family: Helvetica, Arial, sans-serif;
width: 640px;
border-collapse:
collapse; border-spacing: 0;
}
table.celltable2 td, th {
border: 1px solid transparent;
width: 30px;
height: 30px;
transition: all 0.3s;
overflow: hidden;
}
table.celltable2 td {
text-align:center;
vertical-align:middle;
}
Is there something i might be missing?. I tried defining colgroup and colspan but no success.
The problem is with your this css
table.celltable2 td, th {
border: 1px solid transparent;
width: 30px;
height: 30px;
transition: all 0.3s;
overflow: hidden;
}
In this you have targeted the width of <td> but not the <th> as after , you need to define like this table.celltable2 th instead of just th.
This is correct
table.celltable2 td, table.celltable2 th {
border: 1px solid transparent;
width: 30px;
height: 30px;
transition: all 0.3s;
overflow: hidden;
}
Related
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 have a table with this CSS
.tabelaTripla {
border: 0px;
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 20px;
font-size: 0.7em;
line-height: 1.3em;
}
.tabelaTripla tr {
padding: 40px;
margin: 40px;
}
.tabelaTripla th, td{
border: 0px;
width: 33%;
}
.tabelaTripla td{
border: 0px;
width: 33%;
text-align: center;
vertical-align:middle;
word-wrap: break-word;
padding: 40px;
border: 1px solid #AAAAAA;
border-radius: 20px;
}
this works correctly on all browsers but I see this on Firefox for Mac.
Firefox is not rounding the coloring of the columns.
My HTML code for this is simple:
<table class="tabelaTripla">
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
</table>
just a table with 3 columns
Still quite not sure where you went wrong, because you haven't provided the CSS for the colours, but you can just set .tabelaTripla to background-color: yellow; and then set the .tabelaTripla td to background-color: white;. (Obviously you can change these colours to whatever you want)
.tabelaTripla {
border: 0px;
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 20px;
font-size: 0.7em;
line-height: 1.3em;
background-color: yellow;
}
.tabelaTripla tr {
padding: 40px;
margin: 40px;
}
.tabelaTripla th, td {
border: 0px;
width: 33%;
}
.tabelaTripla td {
border: 0px;
width: 33%;
text-align: center;
vertical-align: middle;
word-wrap: break-word;
padding: 40px;
border: 1px solid #AAAAAA;
border-radius: 20px;
background-color: white;
}
<table class="tabelaTripla">
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
</table>
The above snippet will produce this effect:
Edit: By the way, I am also using FireFox on Mac OSX so this should work for you as well.
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 have a table within a table and there are these phantom borders. For the life of me I have tried so many things to kill these extra spaces and I do not know how to get rid of them. Check out the jsfiddle
body{
background: #ddd;
}
.outterTbl{
border-collapse: collapse;
border-spacing: 0px;
background: green;
}
.outterTbl th{
background: black;
color: white;
}
.outterTbl td{
margin: 0px;
border-spacing: 0px;
border: none;
}
.innerTbl{
border-collapse: collapse;
border-spacing: 0px;
text-align: center;
}
.innerTbl th{
background: #3399cc;
color: white;
}
.innerTbl tr:nth-child(odd) {
background: white;
}
.innerTbl tr:nth-child(even){
background: #9ccde5;
}
adding
padding: 0px;
to the outertable td does the trick
jsfiddle
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;
}