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
Related
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>
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 )
Below I have included an image illustrating my issue. In summary, I am having an issue with an approximately 2 pixel whitespace below each of the images on my website. I'm not exactly sure what is causing this, but it is most definitely not the image itself. I believe it to be the box-sizing: border-box snippet in my CSS, due to the fact that 2px would be the sum of the top and bottom borders, however, removing that part of the code does not solve the issue. Any help or tips would be greatly appreciated. I have tried viewing the webpage on my mobile phone, using Firefox and using Chrome, and the issue is persistent between all of them.
The webpage in question can be found at http://www.bellasaluminum.com/gallery.php?jobType=GlassWindow&page=1, however, I have included a portion of the gallery's stylesheet below:
#gallery > div {
border: 1px solid black;
margin: 5px;
width: auto;
}
#gallery > div > * {
display: inline-block;
}
#gallery > div > img {
position: relative;
padding: 0px;
margin: 0px;
}
#gallery > div > div.description {
position: relative;
padding: 3px;
width: auto;
vertical-align: top;
}
#galleryNav {
padding: 0px;
background-color: #dedede;
text-align: center;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 1px solid black;
width: 90%;
margin: auto;
}
#galleryNav > a {
text-decoration: none;
color: black;
font-family: Arial;
font-weight: bold;
display: inline-block;
padding: 10px 8px 10px 8px;
margin: 0px;
}
#galleryNav > a:hover {
background-color: #efefef;
}
#galleryNav > a.active {
background-color: #afafaf;
}
You can either make the img elements block level:
#gallery > div > img {
display:block;
}
or, change the vertical-align property value to something like top. (the default is baseline)
#gallery > div > img {
vertical-align:top;
}
The second option (vertical-align:top) should be used in this instance, because you want the text to be inline with the img element.
I have a page which I am quite happy with the layout of the design: http://dev.twoggle.com/
Then I put this into a Drupal theme and it inserted some extra div's inbetween and I am struggling to figure out how to get my original look back! : dev2.parkingmadeeasy.com.au
the ser_text_right class, when I hover over it using Firebug's page element inspect tool, seems to be overlapping with ser_image_left class - I'm not sure why this is happening.
Below is the css which is causing my problems (when combined with Drupal's output that is).
I'd like to move the entire ser_text_right class upwards, but not sure how?
Many thanks for any help,
Gvanto
/*
=======================================================================
services-prov
=======================================================================
*/
.services-pro {
background: none repeat scroll 0 0 #f3f3f3;
border: 1px solid #A2A1A1;
border-radius: 5px 5px 5px 5px;
float:left;
width:998px;
}
.services-pro .ser {
float: left;
margin: 0;
padding: 10px;
width: 47%;
}
.services-pro .ser img {
margin: 0px 10px 10px;
padding: 0;
}
.services-pro .ser .ser_image_left {
float: left;
height: 100px;
}
.services-pro .ser .ser_text_right {
padding:0;
}
.services-pro .ser .ser_text_right h4 {
padding: 3px 0 0px;
font-weight:bold;
font-size:14px;
}
.services-pro .ser .ser_text_right p {
color: #000;
margin: 0;
padding: 2px;
font-size:14px;
}
Add this to your CSS:
#block-views-home-slideshow-block { width: 400px; float:right; }
Of course you can change the width to whatever width your images are.
Does anyone have any pointers how to to fix the styling issue presented when using jquery ui's datepicker along side blueprint css framework? Specifically the table with the dates appears larger (wider) than the container it sits in.
I tried the other answers, but they didn't do it for me. After playing around with the problem for a few hours I came up with a solution that works for me (Blueprint 1.0, Jquery UI 1.8.5, tested with Smoothness, Redmond and Dark Hive themes in Chrome and IE):
/* remove blue backgrounds - separate for TH to work in IE */
.ui-datepicker-calendar tbody tr:nth-child(even) td,
.ui-datepicker-calendar tbody tr.even td {
background-color:inherit;
}
.ui-datepicker-calendar thead th {
background-color:inherit;
}
/* set correct line height */
.ui-datepicker-calendar tbody tr td {
line-height: 1.1;
}
/* (optional) make same size as example */
.ui-datepicker { font-size: 0.9em; }
Added the following CSS to solve the problem:
.ui-datepicker-calendar table{
margin: 0; }
.ui-datepicker-calendar th , .ui-datepicker-calendar td {
padding: 0; text-align: center; }
Thanks for the help.
I found I had to make a couple more alterations before it looked closer to the default styling:
/*JQUERY-UI + BLUEPRINT CSS CALENDAR FIX*/
.ui-datepicker-calendar table{
margin: 0; }
.ui-datepicker-calendar th , .ui-datepicker-calendar td {
padding: 0; text-align: center; background:white; color:#333; }
.ui-datepicker-calendar th{
padding: 5px 0; }
.ui-datepicker-calendar td{
padding:0 2px 2px 0; }
.ui-datepicker-calendar td a{
padding:0 1px 0 0; }
.ui-datepicker {
font-size:0.8em; }
oneBelizean was on the right track, but it wouldn't work for me until I qualified the th and td selectors with table:
.ui-datepicker-calendar table{
margin: 0; }
.ui-datepicker-calendar table th , .ui-datepicker-calendar table td {
padding: 0; text-align: center; }
After doing this, I didn't need any of the extra stuff Simon added.
I found I had to access the elements very specifically and remove some padding.
/* JQUERY-UI + BLUEPRINT CSS CALENDAR FIX */
.ui-datepicker table{
margin: 0; }
.ui-datepicker-calendar thead tr th , .ui-datepicker tbody tr td {
background:white; color:#333; }
.ui-datepicker-calendar thead tr th{
padding: 5px 0; }
.ui-datepicker-calendar tbody td{
padding:0 2px 2px 0; }
.ui-datepicker-calendar tbody td a{
padding:0 1px 0 0; }
.ui-datepicker-calendar {
font-size:0.8em; }