I continue to develop and quest in css.
I want to put the table cells all with the same width, and not like how it appears in jsfiddle. I tried to manually put width to the "th tag" and "td tag" but they are not giving the widths I define.
.tablesorter {
margin: -5px 0 0 0;
table-layout: fixed;
}
.tablesorter td{
margin: 0;
padding: 0;
border-bottom: 1px dotted #ccc;
}
.tablesorter thead tr {
height: 34px;
color:#082B33;;
background:#B5E5EF;
text-align: left;
cursor: pointer;
}
The fiddle link is as follows:
https://jsfiddle.net/4j43fdm1
Try this
.tablesorter{
width:100%;
}
table tr th, table tr td{
width:16.6%;
word-break: break-all;
}
Click here for demo
First: it's commercial software, I can't share a link to it so you can see what's happening. Ugh. Makes everything harder.
I've written a block of css for print purposes. Here were my steps:
Load page in application
copy HTML from developer tools
Paste html into jsfiddle (so, all the classes/structure is there properly)
write the css in jsfiddle--stuff looks like I want it to look
copy css from jsfiddle into my inquiryPrint.css file (the file that loads for printing)
SOME of the css works, some of it doesn't
Things I considered:
An override issue; inquiryPrint.css is the last file loaded, it should apply its overrides last
The print css file isn't invoked only on media type of print...in fact, here it is:
printWindow.document.write('<link rel="stylesheet" href="../css/InquiryPrint.css" type="text/css" />');
This is the most important, I think: the site is picking up SOME of the valid CSS selectors from the inquiryPrint.css file, but not ALL of them; e.g., it sees .row and applies it's CSS, but doesn't see .admItem and apply its CSS. And this is the stuff that works correctly in the jsfiddle--i.e. .admItem works in jsfiddle but not my app.
Things I tried:
Close/reopen
chrome hard refresh (cmd-shift-R)
it's shared code; I
pushed my changes up to our dev environment, pulled them down on a
co-worker's page, and validated it's not working on his computer
either.
Update
This isn't an override issue. We've even reduced/stripped out all other css files and the problem persists.
This isn't a specificity issue with complex selectors. Almost every selector is single-tier/level (see examples).
This isn't a browser issue. It does not work in Chrome or Firefox (although, of course, those two pages render slightly different).
I had originally cut/paste from jsfiddle, so I thought it might be a cut/paste issue. It's not--we we-wrote the classes by hand with no fix.
It's not a spelling issue, we've tested it by replacing '.admItem' with '.georgeItem' and cut/paste that into the correct place, didn't fix it.
Again, it's seeing OTHER content from the file, just not THIS content.
We stripped the whole css file empty, just left one class, it still didn't pick it up.
I put embedded CSS into the head of the HTML file, it is not picking that up either, for this one class, but it IS picking up other values we put there (e.g. body text transform: uppercase).
We can click through developer tools and see the correct css file, with the correct current changes so it shouldn't be a pointer/syntax issue--it sees the file is there, and picks SOME values from it, not others.
A few screenshots:
Chrome Developer Tools
The Embedded CSS
Here is the css file in its entirety.
.georgeItem {
text-transform:lowercase!important;
}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.heading {
font-weight: 700;
padding: 10px 0px;
}
h1 {
font-weight: 700;
padding: 10px 0px;
text-transform: uppercase;
font-size: 15px;
font-size: 1.5rem;
margin: 0 0 5px 0;
}
h2 {
font-weight: 700;
padding: 10px 0px;
font-size: 14px;
font-size: 1.4rem;
}
h3 {
font-weight: 700;
padding: 10px 0px;
font-size: 13px;
font-size: 1.3rem;
}
h4 {
font-weight: 700;
padding: 10px 0px;
font-size: 12px;
font-size: 1.2rem;
}
h5 {
font-weight: 700;
padding: 10px 0px;
font-size: 11px;
font-size: 1.1rem;
color: #4c7a87;
}
h6 {
font-weight: 700;
padding: 10px 0px;
font-size: 10px;
font-size: 1rem;
color: #66909c;
}
p {
font-size: 10px;
font-size: 1rem;
padding: 0 0 5px 0;
color: #515151;
}
em {
font-style: italic;
}
strong {
font-weight: 700;
}
pre em {
font-style: italic;
color: #686667;
}
.inquiryPrint {
font-family: 'Trebuchet MS',Helvetica,sans-serif;
font-size: 10px;
font-size: 1rem;
}
* {
background: transparent !important;
color: black !important;
text-shadow: none !important;
filter: none !important;
-ms-filter: none !important;
}
/* Black prints faster: h5bp.com/s */
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
/* Don't show links for images, or javascript/internal links */
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
table {
border-collapse: collapse;
}
thead {
display: table-header-group;
}
/* h5bp.com/t */
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
#page {
margin: 0.5cm;
size: landscape;/*does not work in some browsers like chrome */
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
.inquiryPrint table {
width: 100%;
background-color: #ffffff;
}
.inquiryPrint tr,
.inquiryPrint thead tr,
.inquiryPrint tbody tr,
tr,
th,
td {
page-break-inside: avoid;
}
.inquiryPrint tr th,
.inquiryPrint thead tr th {
border-bottom: 2px solid #c0c0c0;
padding: 5px;
}
.inquiryPrint tr,
.inquiryPrint tbody tr {
border-bottom: 1px dashed #c0c0c0;
vertical-align: top;
}
.inquiryPrint tr:last-child,
.inquiryPrint tbody tr:last-child {
border-bottom: none;
}
.inquiryPrint tr td {
padding: 5px 10px 10px 2px;
text-align: center;
}
.inquiryPrint tr td,
.inquiryPrint tbody tr td {
text-align: center;
}
.inquiryPrint tr td.right,
.inquiryPrint tr th.right,
.inquiryPrint tbody tr td.right,
.inquiryPrint thead tr th.right {
text-align: right;
}
.inquiryPrint tr td.left,
.inquiryPrint tr th.left,
.inquiryPrint tbody tr td.left,
.inquiryPrint thead tr th.left {
text-align: left;
}
/*.inquiryPrint tr td.totalRow,
.inquiryPrint tbody tr td.totalRow {
text-align: right;
font-weight: 700;
font-size: 10px;
font-size: 1rem;
}*/
/* supports 15 character value with padding */
.inquiryPrint .wide15 {
width: 100px;
}
/* supports 30 character value with padding */
.inquiryPrint .wide30 {
width: 200px;
}
/* trying to insert code conversion to flexbox for printing clinical order only */
.head {
display:-webkit-flex;
-webkit-flex-direction:column;
-webkit-justify-content:flex-start;
border-bottom:1px solid black;
padding-bottom:5px;
margin-bottom:10px;
}
.value {
display:-webkit-inline-flex;
}
.row {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.head .row {
display:-webkit-flex;
-webkit-flex-direction:column;
-webkit-justify-content:flex-start;
}
.admLabel,.label,.label_left {
text-align:left;
font-family:Arial;
font-weight:700;
font-size:1em;
margin-right:3px;
}
.row.pushRight {
text-align:right;
-webkit-flex-direction:row;
-webkit-justify-content:flex-end;
justify-content:flex-end;
}
.admPatientDetails .row {
margin-top:20px;
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:space-between;
}
.clinicalOrderLineAdministrationDetails table {
width:100%;
border-collapse:collapse;
}
.clinicalOrderLineAdministrationDetails table tbody tr {
border-bottom:1px dotted #818181;
}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
We found the issue last night. The way we were dynamically generating the page in javascript, there wasn't a doctype declaration at the top of the page. Once we added
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt p://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Everything worked fine. Sigh.
the site is picking up SOME of the valid CSS selectors from the inquiryPrint.css file, but not ALL of them; e.g., it sees .row and applies it's CSS, but doesn't see .admItem and apply its CSS. And this is the stuff that works correctly in the jsfiddle--i.e. .admItem works in jsfiddle but not my app.
That sounds as if the other stylesheets, that are not targeted at any medium specifically, override the rules you have in your print stylesheet by using more specific selectors.
Using a tool like Firebug you'll be able to see which CSS rules are being applied and why they're overriding other styles.
As CBroe states, it's quite likely that CSS styles with more specific selectors are overriding your stylesheet. Clearly your stylesheet is being read, so that's not the issue.
I'm a bit new to CSS/html. I am trying to include this jquery plugin using tablesorter that basically lets your columns sort. It looks to change the class type when the header of the table is clicked on to sort the column in ascending/descending order. I'm trying to follow this tutorial: http://weblogs.asp.net/hajan/archive/2011/02/09/table-sorting-amp-pagination-with-jquery-in-asp-net-mvc.aspx
So in one of my columns, it doesn't make sense to be able to sort since it's all the same. I'm starting with a asp.net/mvc3 application and I'm referring to the last column where you can click on "Details." Since this doesn't change I'd like to not have the up/down arrows in that column. The original css looks like:
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 11pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 10pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background-image: url(themes/base/images/bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(themes/base/images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(themes/base/images/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
So I thought I could add:
table.tablesorter thead .nostyle {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background-color: #8dbdd8;
}
And then in the header I don't want style, do:
<th class="#nostyle"></th>
But that doesn't work. Am I going about this correctly? Or is there a better way? Thanks!
because your class isn't right. class #nostyle does not match .nostyle. .nostyle matches elements with class="nostyle"
<th class="nostyle"></th>
Why not simply disable sorting on those columns?
http://tablesorter.com/docs/#Configuration
Look for the 'headers' setting:
headers Object null An object of instructions for per-column controls in the format: headers: { 0: { option: setting }, ... } For example, to disable sorting on the first two columns of a table: headers: { 0: { sorter: false}, 1: {sorter: false} }
If you used
table.tablesorter thead .nostyle
Your class should be 'nostyle' not '#nostyle' for ex:
<th class="nostyle"></th>
I'm using DOMPDF to build out a download report of database entries for a shopping cart.
Not sure what code to put in here, it's a very typical html page with some foreach loops to display the content, and it creates the pdf just fine, but none of the css from the file is rendered as css, it gets printed as text at the top of the document.
The CSS is inline in the head of the document as any normal inline css would be.
$export_pdf ="<html><head>";
$export_pdf .="<meta http-equiv='Content-Type'
content='text/html; charset=utf-8' />";
$export_pdf .="<style type='text/css'>
.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.list td { border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; }
.list thead td { background-color: #E5E5E5; padding: 3px; font-weight: bold; }
.list tbody a { text-decoration: none; }
.list tbody td { vertical-align: middle; padding: 3px; }
.list .left { text-align: left; padding: 7px; }
.list .right { text-align: right; padding: 7px; }
table .interior,
table .interior td { border: none !important; }
table .interior tr { border-bottom: #DDD 1px solid !important; }
.list tbody .interior thead td { background: #efefef !important; }
</style>";
Then just a basic table etc.
I can't find anyone else having this issue with inline css. I've seen some posts where people have troubles getting linked styles to work, but this is simple inline css, why is it being interpreted as text instead of css?
Thanks.
-Vince
As weird as it appears, it is due to the simple quotes in the <meta> tag.
Replace them by escaped double quotes and it will work. Could you report this issue in the issue tracker please ?
i am trying to change the distance between the pager numbers appearing in my GridView. i am using a css file in order to control the style of the grid.
.gridViewPager td a
{
color: white;
text-decoration: none;
text-align:justify right;
}
.gridViewPager td a:hover
{
color: white;
text-decoration: underline;
text-align:justify right;
}
.gridViewPager span
{
text-autospace:none;
color: black;
text-align:justify right;
}
Add the following to .gridViewPager td a:
display: block;
padding: 2px 5px;
That will give you 2px on top and bottom, and 5px on either side of the a element.
Just call CssClass="gridViewPager " inside the Grid. The class definition is as follows,
.gridViewPager tr.paging td {
background-color: #FFFFFF;
border-bottom: 0;
color: #000000;
font-size:13px;
padding:0 4px 0 0;
}
.gridViewPager tr.paging {
background-color: #FFFFFF;
border: 0;
color: #000000;
font-size: 12px;
padding:0;
}
.gridViewPager tr.paging td span {
color:#993366;
text-decoration:underline;
font-size:13px;
}
.gridViewPager tr.paging td a {
color:#000000;
text-decoration:none;
}
.gridViewPager tr.paging td a:hover {
color:#993366;
text-decoration:underline;
}
Check the result first and then adjust the padding and other styles as you like.
Hope this helps..
This is a problem when you use table and there is no fixed width set on the table columns.
So your columns will occupy all available space.
May be you can set a max-width on the td and the table and set padding:0 7px; on td as well.
This would limit the space available to the cells.
thanks to everyone
the problem was that each number was on a separate cell in a table which is located in the gridview pager footer, so by changing the column size I was able to get them closer together.
.gridViewPager td
{
padding: 1px;
width:5%;
}