Hey guys,
I am using bootstrap 3 ,i have created a table which is of responsive type .The table is divided into 4 columns and each column is separated by white space.But as per my requirement i dont need the white space after first columns as shown in image with red arrow .
To the table class i have used properties border-collapse: separate and border-spacing: 10px 0;
border spacing here is responsible for column seperation.Please help how to do remove this single white space of the table made by border spacing ... please Find js fiddle link in below comments
You could , fill that white space with a border (giving the relative position and some other extra CSS) :
for instance :
.buynow-product-comparisions table, .table-product-comparision table {
}
.buynow-product-comparisions th, .table-product-comparision th, .buynow-product-comparisions td, .table-product-comparision td {
background-color: #c9e8fa;
text-align: center;
color: #666;
}
.table-product-comparision th.personal-head, .table-product-comparision th.cloudworkgroup-head, .table-product-comparision th.enterprise-head {
background: #ffffff;
color: #ffffff;
}
.buynow-product-comparisions td.bg-white {
background: #ffffff;
padding: 5px 0px;
}
.buynow-product-comparisions td.plan-feature-text, .table-product-comparision td.plan-feature-text {
background-color:#c9e8fa;
color: #666;
text-align: left;
}
.table-product-comparision th.attribute-title {
background-color: #FFF;
text-align: right;
width: 30%;
}
.cloud-personal {
background: none repeat scroll 0 0 #4d4d4d;
padding: 12px 0;
}
.table-product-comparision td.vtypes {
color: #26a2ed;
font-weight: bold;
}
.table-product-comparision td {
background: none repeat scroll 0 0 #dedede;
color: #666;
text-align: center;
}
.table-product-comparision td.plan-feature-text {
background: #ffffff;
}
.table-responsive.buynow-page, .table-responsive.buynow-page {
padding: 0;
}
td + td {
border-right:10px solid white;
border-bottom:1px solid #ccc
}
http://jsfiddle.net/84LXL/4/ (some css removed and mostly added on last lines )
Related
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
I have this code:
#include component(elementList) {
tr {
td {
width: 50%;
background: $darkGray;
padding: 5px;
text-align: center;
}
#include option(heading) {
padding: 5px;
background: #eeeeee;
text-align: center;
font-family: 'Quicksand', sans-serif;
}
}
}
It's just a table. And every row should have a dark background (which is saved in $darkGray), except for those rows with an option --heading set. Those should have a bright background.
But in my browsers, all rows are in the dark color. I also tried !important inside of the option.
Any ideas?
Thank you guys
PS: I am using CSStyle with SASS.
Think this is a scoping issue. You use the dark background on table cells, while you're using the bright background on rows. So no matter which option the row has, its contained cells are dark.
This should work (untested and never used CSStyle)
#include component(elementList) {
tr {
td {
width: 50%;
background: $darkGray;
padding: 5px;
text-align: center;
}
#include option(heading) {
td {
padding: 5px;
background: #eeeeee;
text-align: center;
font-family: 'Quicksand', sans-serif;
}
}
}
}
I have 4 different table styles as follows:
table {
margin: 10px;
border: 1px solid rgb(166, 201, 226);
}
table th {
background-color:navy;
padding: 4px, 5px;
border: 1px solid rgb(166, 201, 226);
vertical-align: middle;
}
table td {
padding: 4px, 5px;
border: 1px solid rgb(166, 201, 226);
vertical-align: middle;
}
/* Invisible - no borders, no table margin */
table.invisible {
margin: 0px;
border: 0px;
}
table.invisible td {
border: 0px;
vertical-align: top;
}
/* Invisible: Middle Align */
table.invisible-middlealign {
margin: 0px;
border: 0px;
}
table.invisible-middlealign td {
border: 0px;
}
/* Invisible: Middle Align - No Pad */
table.invisible-middlealignnopad {
margin: 0px;
border: 0px;
}
table.invisible-middlealignnopad td {
border: 0px;
padding: 0px;
}
/* Invisible: No Pad */
table.invisible-nopadding {
border: 0px;
margin: 0px;
}
table.invisible-nopadding td {
border: 0px;
padding: 0px;
vertical-align:top;
}
Sometimes I am finding that for example I need an 'invisible' table inside a 'invisible-middlealignnopad' table but on another occasion the 'invisible-middlealignnopad' table needs to be inside the 'invisible' one. Given the different combinations I can have, the only way I have catered for this is by doing something like the following:
table.invisible td table.invisible-middlealignnopad td {
border: 0px;
padding: 0px;
}
I then have to replicate this for all combinations.
I'm guessing that there's got to be a better/standard way of handling this requirement. Appreciate any suggestions :)
Thanks,
Neil
Could you simply create a class that you add to the HTML to control these certain things that need to be "overwritten" so to speak? For example...
CSS
Change your above CSS to the below... If I am following your CSS correctly you need to account for times when a table should have no margin and no border, when a tables TD should have no padding and no border, and when a td should be aligntop or align middle. In the below CSS, you can control the tables margin and border, td's padding and border and td's vertical alignment by adding classes to the tables appropriately.
Basically.. You are using HTML classes to override things, instead of using complex CSS selectors to override. The overrides are more granular and controlled by your HTML.
table {
margin: 10px;
border: 1px solid rgb(166, 201, 226);
}
table th {
background-color:navy;
padding: 4px, 5px;
border: 1px solid rgb(166, 201, 226);
vertical-align: middle;
}
table td {
padding: 4px, 5px;
border: 1px solid rgb(166, 201, 226);
vertical-align: middle;
}
table.no-margin {
margin: 0px;
border: 0px;
}
table.no-padding td {
padding: 0px;
border: 0px;
}
table.align-top td {
vertical-align: top;
}
HTML
<table>
<td>
<table class="no-pad-border">
<td>
Something
</td>
</table>
</td>
</table>
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%;
}