CSS multiple tables in same page with different IDs [closed] - css

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
We have two different tables in the same page. different IDs required for another purpose. So we created multiple CSS table elements in the Style . But only the first one is working. If i keep the customers design on top it will be applied , but only one at a time.
#salescss {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#salescss td, #salescss th {
border: 1px solid #ddd;
padding: 8px;
}
#salescss tr:nth-child(even){background-color: #f2f2f2;}
#salescss tr:hover {background-color: #ddd;}
#salescss th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #357EC7;
color: white;
body {font-family: Arial;}
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #357EC7;
color: white;
body {font-family: Arial;}

You had a missing } after #salescss th { and #customers th {
#salescss {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#salescss td, #salescss th {
border: 1px solid #ddd;
padding: 8px;
}
#salescss tr:nth-child(even){background-color: #f2f2f2;}
#salescss tr:hover {background-color: #ddd;}
#salescss th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #357EC7;
color: white;
}
body {font-family: Arial;}
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #357EC7;
color: white;
}
body {font-family: Arial;}

Related

Adding some space between tables with css

I have generated a HTML page with several tables.
Right now they show one after another without any space between them
my current css file is very simple
table {
font-family: arial, sans-serif;
border-collapse: collapse;
/*width: 100%;*/
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
How can I add some spacing between the tables using only css?
I tried
table{
margin-right: 10px;
float: left;
}
but it did not work out
I modified it to
margin-bottom:10px;
float:bottom;
and it seems to work.
Your code should work. Check this snippet:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
margin-right:10px;
float:left;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table>
<tr><td>aaaaa</td></tr>
</table>
<table>
<tr><td>bbbb</td></tr>
</table>
<table>
<tr><td>aabbbbaaa</td></tr>
</table>
If you have width: 100%; you need to add margin-top:10px for example.

Rails 4 + Datatables: Empty table displays strange double text

I have a DataTable in my view that displays strangely when the table is empty. Every other row has what looks like an offset text-shadow but I don't see anything in my css that would do that? This issue also goes away once there is an additional column on the table.
html (example of first row with double-text "Current Weight")
<tr class="profile-row odd" role="row" data-dt-row="0" style="height: 30px;">
<td class="profile-header" data-dt-row="0" data-dt-column="0">
Current Weight
</td>
</tr>
css
element.style {
height: 30px;
}
.profile-row {
padding-bottom: .25em;
text-align: center;
}
* {
box-sizing: border-box;
}
user agent stylesheet
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
Inherited from table.profile-table-table.specialest.dataTable.no-footer.DTFC_Cloned
table {
border-spacing: 1em 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
user agent stylesheet
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
Inherited from body
body {
background-color: #fff;
color: black;
font-family: 'open sans';
font-size: 16px;
font-weight: 300;
line-height: 20px;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
Inherited from html.js.flexbox.flexboxlegacy.canvas.canvastext.webgl.no-touch.geolocation.postmessage.websqldatabase.indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.fontface.generatedcontent.video.audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
Pseudo ::before element
*:before, *:after {
box-sizing: border-box;
}
Pseudo ::after element
*:before, *:after {
box-sizing: border-box;
}
....
element.style {
}
div.DTFC_RightBodyWrapper tbody tr:first-child th, div.DTFC_RightBodyWrapper tbody tr:first-child td, div.DTFC_LeftBodyWrapper tbody tr:first-child th, div.DTFC_LeftBodyWrapper tbody tr:first-child td {
border-top: none;
}
table.dataTable td, table.dataTable th {
box-sizing: content-box;
}
table.dataTable td {
white-space: nowrap;
}
table.dataTable td, table.dataTable th {
box-sizing: content-box;
}
.profile-header {
font-weight: bold;
padding-right: 1em;
padding-bottom: .25em;
text-align: right;
}
p, ol, ul, td {
font-family: 'open sans';
font-size: 1em;
line-height: 1.4em;
-webkit-padding-start: 0;
}
td, th {
padding: 0;
}
* {
box-sizing: border-box;
}
user agent stylesheet
td, th {
display: table-cell;
vertical-align: inherit;
}
Inherited from tr.profile-row.odd
.profile-row {
padding-bottom: .25em;
text-align: center;
}
Inherited from table.profile-table-table.specialest.dataTable.no-footer.DTFC_Cloned
table {
border-spacing: 1em 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
user agent stylesheet
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
Inherited from body
body {
background-color: #fff;
color: black;
font-family: 'open sans';
font-size: 16px;
font-weight: 300;
line-height: 20px;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
Inherited from html.js.flexbox.flexboxlegacy.canvas.canvastext.webgl.no-touch.geolocation.postmessage.websqldatabase.indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.fontface.generatedcontent.video.audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
Pseudo ::before element
*:before, *:after {
box-sizing: border-box;
}
Pseudo ::after element
*:before, *:after {
box-sizing: border-box;
}

DataTables column titles all crammed over 1st column

I'm trying to get a simple DataTable grid to render, but I'm getting an odd behavior. The column headers all look crammed over the 1st column.
I know it is because of some styling being applied to the class workspace-table because when I delete all styles related to that class the problem goes away. (I inhierited the styles, and am not very css literate).
Could someone tell me which style is breaking this? I have tried removing individual classes or styles but I'm not seeing what the issue is.
fiddle!
styles:
.workspace-table{
width: 80%;
margin-left: 20px;
border: 2px solid #C0C0C0;
width: 80%;
font-size: 11px;
}
.workspace-table .column-resize-icon{
float: right;
color: gray;
margin-right: -4px;
}
.workspace-table .table-desc-width{
width: 288px !important;
}
.workspace-table .table-dollar-format{
float: right;
padding-right: 10px;
}
.workspace-table thead/*.headerText*/{
color: white;
display: inline;
float: left;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 0;
padding-right: 5px;
text-align: left !important;
text-decoration: underline;
}
.workspace-table tr {
border: 2px solid #C0C0C0;
}
.workspace-table th {
border-right: 2px solid;
background: #969696;
}
.workspace-table th .fa-sort{
color: grey;
}
.workspace-table th .fa-sort-up{
color: white;
}
.workspace-table th .fa-sort-down{
color: white;
}
.workspace-table .border-right .fa{
display: table-cell !important;
}
.workspace-table .border-right{
border-right: 2px solid white;
}
.workspace-table > thead > tr > th, .workspace-table > tbody > tr > th,
.workspace-table > tfoot > tr > th, .workspace-table > thead > tr > td,
.workspace-table > tbody > tr > td, .workspace-table > tfoot > tr > td {
padding: 5px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.workspace-table .negative {
color: red;
}
Thanks in advance!
I removed display:inliine and float:left from .workspace-table thead.
It looks like someone commented out part of that CSS selector, which maybe wasn't intended for the thead element itself, but maybe one of it's children?
http://jsfiddle.net/S9QXY/
.workspace-table thead/*.headerText*/{
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 0;
padding-right: 5px;
text-align: left !important;
text-decoration: underline;
}
float kills any display.
Do not float your table elements and it will render fine.
jsfiddle.net/EX8LZ/18/
as said , do not either modify display values, unless you have good reason :)
Take out the display: inline and the float:left from your thead rule:
.workspace-table thead/*.headerText*/{
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 0;
padding-right: 5px;
text-align: left !important;
text-decoration: underline;
}

CSS combine table styles

I've found similar tops for combining classes using the comma to separate them; however when I try it with the table class only the last table is receiving the style. Here is a small sample of what I'm trying to clean up:
table.tslist {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 225;
}
table.djrlist {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 225;
}
table.vacation {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 225;
}
table.tslist td {
border-left: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 4px;
}
table.djrlist td {
border-left: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 4px;
}
table.vacation td {
border-left: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 4px;
}
As I mentioned I tried table.tslist, table.djrlist, table.vacation {....} but no luck.
I'm guessing that you are doing something like this:
table.x, table.y td { }
and assuming that it'll expand out and apply to all the TD elements. It won't. You need something like this instead:
table.x td, table.y td { }
Be sure to include the element type in your seperators:
table.tslist,
table.djrlist,
table.vacation
{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 225;
}
table.tslist td, <-----
table.djrlist td, <-----
table.vacation td <----- {
border-left: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 4px;
}
I'm guessing you don't even need to do multiple styles like that. Classes are not like IDs, you can use them more than once.
If all of your tables are styled the same, just replace all of this:
<table class="tslist">...</table>
<table class="vacation">...</table>
<table class="djrlist">...</table>
with
<table class="tslist">...</table>
<table class="tslist">...</table>
<table class="tslist">...</table>
You can then remove the unused style entries from the css file.

Is it possible to have the menu link color change on the table hover for an asp.net menu control?

I'm using an ASP.net menu and when i hover inside my menu item's table, i change the background color on the table column, but unless i hover over the link text itself, the link text color will not change.
Is it possible to have the link text color changed on the table hover?
Example below shows what happens.
Excuse the ugly CSS:
.TopStaticSelectedStyle
{
cursor: pointer;
font-size: 11px;
font-family: Verdana;
}
.TopStaticMenuStyle a,
.TopStaticMenuStyle a:visited,
.TopStaticMenuStyle a:active
{
color: #ffffff;
text-decoration: none;
font-weight: bold;
font-family: Verdana;
}
.TopStaticMenuStyle a:hover
{
color: #000000;
text-decoration: none;
font-size: 11px;
font-weight: bold;
font-family: Verdana;
}
.TopStaticMenuItemStyle td
{
padding: 0px 12px 0px 12px;
text-align: center;
background-color: #6c85b0;
height: 18px;
border-top: solid 1px #012754;
border-bottom: solid 1px #012754;
border-left: solid 1px #012754;
border-collapse:collapse;
}
.TopStaticHoverStyle
{
font-weight: normal;
font-family: Verdana;
}
.TopStaticHoverStyle td
{
padding: 0px 12px 0px 12px;
text-align: center;
background-color: #ffffff;
height: 18px;
border-top: solid 1px #012754;
border-bottom: solid 1px #012754;
border-left: solid 1px #012754;
border-collapse:collapse;
color: #000000;
}
I scrapped your css and just started from scratch but you should be able to get the idea from this.
So some basic table html:
<table>
<tr>
<td>
Test
</td>
<td>
Test 2
</td>
</tr>
</table>​
And then the css:
a {
color:#000;
}
td {
border:solid 1px black;
background:#234567;
padding:5px 10px;
}
td:hover {
background:#eee;
}
td:hover a {
color:#ccc;
}
td a:hover {
color:#777;
}
​
The key here is the td:hover a selector which is what you need to change the color on hover of the td.

Resources