I have just started working on a page that uses bootstrap and bootstrap-table.
Starting with just bootstrap I can select the layout I like using:
<table class="table">
I then want to add the column sorting functionality from bootstrap-table so I change that to:
<table class="table" data-toggle="table">
This has the effect of changing the presentation set up by bootstrap.
I then add the sorting attributes:
<table class="table" data-toggle="table" data-sort-name="fname" data-sort-order="desc">
<thead>
<tr>
<th data-field="fname" data-sortable="true">First Name
<th data-field="lname" data-sortable="true">Last Name</th>
This functions but each time I click on a new header to select that as my sort column it resizes the width of that column.
Questions:
Is it possible to use bootstrap-table /without/ changing the presentation layout set up by bootstrap?
Is it possible to prevent the changing of column widths when selecting a new sort column.
You need to provide fixed width with some value to the "td" to achieve that. Like in this case you can provide "width: 33.33%" for three columns.
You can use this css BUT you may have some problems with small responsive versions.
th .caret{
position:absolute;
}
th{
vertical-align:middle;
}
I cannot understand what do you mean by "changing the presentation layout". Maybe you can remove the css you dont want to use? Can you be more specific?
Related
I have 2 tables on a single html page.
I would like to remove the border on just one of them.
The css I have currently is...
.table th, .table td {
border-top: none !important;
}
this is also linked with the table (I have bootstrap on it also, I think the table class is also linked with that?)
<table class="table">
<tbody>
<tr>
<th>1</th>
</tr>
<tr>
<td>1</td>
</tr> etc.....
So in the CSS I just want to make a rule that applies no border to only one of the 2 tables on my page. However I can't figure out how to to do it because the are using the same table class, and not sure if I need more than one rule? I've tried using parent selectors and ID selectors but could be calling them wrong. Thanks everyone!
You could just add a unique class or id to whichever table you do want to style and target that selector in your CSS. Like so:
HTML
<table class="table unique-name">
...whatever contents
</table>
CSS
.unique-name {
// some styles.
}
UPDATE
Here's a Fiddle to show you what I'm talking about.
Notice that the table with the class styled-table assigned to it has some formatting, while the table with the class unstyled-table has no formatting.
One way to do it would be to add another class to table you want to remove the border from.
Something like <table class="table noborder"> and then apply whatever css you want to the noborder class.
The proper way would be to have styles on the table, and then modify the table accordingly. This would be an example of how:
.table--bordered {
border: 1px solid #666;
}
<table class="table">
// No Borders
</table>
<table class="table table--bordered">
// With Borders
</table>
Bootstrap class for bordered table is table-bordered. If you don't use it, there'll be no border on table.
I have an html table that is created using constant contact and and I would like to make it responsive and fit the container div holding it.
Here is the demo
I tried the following but this doesn't work as well
<table border="0" width="100%" cellspacing="0" cellpadding="0">
Table aren't great at being responsive and keeping their layout - so it's probably best to override their styles on smaller screens, like:
http://jsfiddle.net/wildandjam/E32Cq/
#media all and (max-width:768px){
table,tr, td, tbody, td p table div, table table{
width:100%!important;
float:left;
clear:both;
display:block;
text-align:center;
}
table img {
max-width:100%;
height:auto;
}
}
Pure css way to make a table fully responsive, no JavaScript is needed. Check demo here Responsive Tables
Here is css
<style>
.tablewrapper{width: 95%; overflow-y: hidden; overflow-x: auto;
background-color:green; height: auto; padding: 5px;}
</style>
And here is HTML Part
<div class="tablewrapper">
<table class="responsive" width="98%" cellpadding="4" cellspacing="1" border="1">
<tr>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>Address</td>
<td>Contact</td>
<td>Mobile</td>
<td>Office</td>
<td>Home</td>
<td>Residency</td>
<td>Height</td>
<td>Weight</td>
<td>Color</td>
<td>Desease</td>
<td>Extra</td>
<td>DOB</td>
<td>Nick Name</td>
</tr>
</table>
</div>
Additionally use can use jquery to add tablerapper on page load, if you don't want to manually add tableWrapper div around your table. Just use
$().ready(function(e){
$(document).find("table.responsive").each(function(e){
$(this).wrap("<div class="tablewrapper"></div>")
})
})
It'll be much easier if you don't use html elements that aren't designed to do this job. Tables are used for presenting data, not to hold layout.
If you really need to use tables you'll have to hide and show rows with media queries, which is a pretty bad practice.
If you decide to go with divs, you can float them setting different width in media queries depends on screen size.
I've been looking to your case and I have two answers for you.
The first one is the answer to the question "¿how to make your html table responsive?" (note: Spanish article, you may need chrome page translator for example)
The second one is "you should considere a more semantic markup" (tableless) for that content. Instead of using <table> you should use <ul><li> as follows:
<ul class="itemList">
<li class="item">
<img src="" alt="" />
<p>From</p>
<p class="price">25€<span>per person sharing</span></p>
</li>
</ul>
Then use external CSS to apply style:
.itemList {width: 100%} /*probably not necessary*/
.item {display:inline-block; width: 33%; max-width: /*here your desired max width*/}
.price span {display: inline-block} /*no cells, no floats = no problems*/
Finally you can use #media queries to creat your CSS breakpoints:
#media only screen and (max-width: 480px) {
.item {display:inline-block; width: auto; max-width:100%;}/*just as an example*/
}
Just let me know if you have any further questions
I try to make a lite rwd table extend without any other dependency libraries (ex: jQuery):
https://github.com/sean1093/html-rwd-table
You can simply use as follow:
<div id="myTable"></div>
var myTable = new rwdTableExtend("myTable");
myTable.initTable();
You can use bootstrap to make table responsive.
Define class as table-responsive to make table as responsive.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
TL;DR:
I have a solution that works well for a lot of table implementations, given that you are formatting your tables well (table>thead>tr>th^^tbody>tr>td). Find my CodePen here. Depending on the data in your table, this may be a good mobilizing solution.
The Director's Cut
See my CodePen here.
This solution assumes you have built your tables nicely, meaning you are using thead with th and tbody with td. For example:
<table>
<thead>
<tr>
<th>A</th>
<th>S</th>
<th>L</th>
</tr>
</thead>
<tbody>
<tr>
<td>33</td>
<td>M</td>
<td>United States</td>
</tr>
</tbody>
</table>
Given that the table data isn't characterized by columns and columns of numeric values, this JS / CSS solution works well. You can see it in action on my employer's docs pages (SmartyStreets Documentation) and in human readable form on the CodePen snippet I built for it here. To see it working, resize the screen. Breakpoints are set differently on each implementation, because consistency. Here's how to implement it.
Tables are fed to the tableMobilizer function. Given that it is built on jQuery, this can be done for all tables on the page like so:
var tables = $(table);
tableMobilizer(tables);
You can definitely be more selective about how you mobilize tables with your selector if you need to be.
This will generate a new set of tables for each table passed in and append them after their respective source table. Each new table contains a row of a source table which is transformed with a 90 degree CCW rotation and paired with the table headings.
Old tables are dynamically classed with .hidden-small-down and new tables are classed with .hidden-medium-up for your CSS media queries.
New tables come classed with .mobile-tables (for a collection of all mobile tables generated by a single source table), .mobile-table (for each mobile table representation of a single source table row), .mobile-table-row (for a row in a mobile table), .mobile-table-key (for the first column of a mobile table), and .mobile-table-value (for the second column of a mobile table).
In your CSS, set up your media queries to hide / show the appropriate table views:
#media only screen and (min-width: 768px) {
.hidden-medium-up {
display: none;
}
}
#media only screen and (max-width: 768px) {
.hidden-small-down {
display: none;
}
}
With the media queries implemented, styling the tables is left to your discretion.
After Credits Scene
This is not a silver bullet solution. Visualizations using tabular data can be very complicated. As mentioned above, this solution isn't great for column-heavy tables. It also doesn't handle col and row spanning. As always, seriously consider whether or not you actually need to use a table in your layout (beyond the scope of this comment). If you do, this may be a good solution for mobilizing your tables.
Use media queries and width of your container and font sizes should be in percentage.
The problem here is actually with your table. As you can see, one of the bottom tables has an explicit width set, which is forcing the rest of your table to follow suit:
<table id="content_LETTER.BLOCK1" style="height: 21px;" border="0" width="798" cellspacing="0" cellpadding="0">
Notice the width="798". This will default to pixels. Get rid of any explicitly defined widths and the table should become closer to being responsive.
However, as others have said - responsive tables are tricky. Especially ones containing so many other nested tables (as in your example). You'll also need to address the responsiveness of any images within those tables, as these will likely force the table to be bigger than it needs to be. I would re-visit your whole layout here, and try and adopt a more responsive-friendly element to use throughout your page.
Update:
Please note that the reason #wildandjam's answer 'works' is essentially because he's overwritten the set width of all of your table elements. It's a quick fix but in my opinion it doesn't bridge the gap of understanding.
I am using Bootstrap 3.x with a table definition like this
<table class="table table-hover table-condensed table-striped table-bordered">
Pretty standard stuff
I want to reduce the default vertical padding on the cells - want to reduce the padding on cells further. I know that table-condensed reduces the vertical padding by 50%. I want to reduce it to just 1px.
Where do I make the change? I have tried going through bootstrap.min.css but can't find anything to modify there - nothing I understand
Many thanks in advance
Best wishes
Iyer
It's pretty easy if you know how to use inspector tool of your browser (Right click->Inspect Element). If you want to learn CSS this would be a very important tool.
So find this property:
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td{
padding: 5px;
}
which has padding: 5px;, change it to 1px.
Here's how it looks when changed.
Note - Instead of modifying the .table-condensed class which will all tables which use this bootstrap class, it could be more advantageous to make another class (say table_morecondensed ) as below...
.table_morecondensed>thead>tr>th,
.table_morecondensed>tbody>tr>th,
.table_morecondensed>tfoot>tr>th,
.table_morecondensed>thead>tr>td,
.table_morecondensed>tbody>tr>td,
.table_morecondensed>tfoot>tr>td{ padding: 2px; }
+1 "Inspect Element" ... tells you exactly what the settings are per element and where they are coming from. Invaluable tool for working with the layout.
As for customizing Bootstrap (v3 at least), I believe Site.css is the local site-level override file ... so DO NOT change the core bootstrap css files ... instead just add override styles into Site.css and make that your personal file. If the style overrides don't appear to take, add the !important tag to them. And if you ever update your bootstrap package be sure to save a copy of your Site.css so you can reapply your customizations.
I have a layout issue that I'm trying to solve that involves sortable columns. When a user is on a low resolution screen, or resizes their browser, the sorting icons dont line up with each other anymore. Users have complained many times about this.
In the following screengrab I'd like the sorting icons to line up with the green line rather than the way they are now (red line)
Here'e the jsfiddle snippet that renders the above table: http://jsfiddle.net/JgSMq/
<table class="table table-bordered data-table sort display">
<thead>
<th class="sorting">ID Column <i class="sort-icon"></i></th>
<thead>
</table>
To patch the issue, you can move the <i> tags to before the actual text in <th>. That should improve your alignment issues by a lot.
To completely fix it though, you may need to set the vertical-align:top; on those <th>.
Here is an example.
Well maybe you can try something like:
th {
white-space: nowrap;
}
Here is your fiddle updated: http://jsfiddle.net/JgSMq/1/
I want different styles on each column of a table. I've read that you could do that by using <colgroup> or <col>, but I had no luck. I have an example here, and nothing seems to change. Am I doing something wrong? Will this work on xhtml?
I know I could add a "class" attribute on each <td>, but that seems weak.
That's correct. While colgroup itself is supported by all browsers, this isn't true for the attributes of the inner col element. Of possible attributes, only width is supported on all browsers. But unlike CSS, <col width=""> only supports pixel and percentage widths.
Don't use it. Instead, create CSS classes and assign them to each td. Yes, it sucks.
EDIT Updated link above to page with better information
Set your table-layout to auto instead of fixed...
table {table-layout: auto;}
My personal site supports multiple themes and I see these kinds of differences all the time.
You could use css selectors to get similar results without adding extra classes.
As an example if you want to give specific style to a second column you can use:
table>tbody>td:nth-child(2){font-weight: bolder;}
Here is a trick I used which actually worked well. In an generic (site wide) css file I put:
.mytable td:nth-child(1) { width: var(--w1);}
.mytable td:nth-child(2) { width: var(--w2);}
.mytable td:nth-child(3) { width: var(--w3);}
.mytable td:nth-child(4) { width: var(--w4);}
and so on up to whatever I felt was the maximum number of columns in any table I would ever need on my site.
Then on each table I could define the width with a style such as:
<table class="mytable" id="tbl1" style="--w1: 30px; --w2: 100px; --w3: 80px;">
This made it easy to set the column widths plus I could add code to resize the columns which simply had to change the style property on the table for the desired column. This avoided having to make numerous CCS entries every time I wanted to define the column widths for a table. To change a column width you could use something like this:
document.getElementById("tbl1").style.setProperty("--w2", "123px");
The above simply changes the width of column 2 by changing the --w2 variable value.
If you really need to use cols tags without react restriction then dangerouslySetInnerHTML will help:
<colgroup dangerouslySetInnerHTML={{
__html: `
<col style="background: red;"/>
<col style="width: 20px;"/>
`
}}/>
Note that while this works this is not the recommended way to work with react.
In 2020, if you want different styles on columns, you can:
1. style/CSS <col>, but for only a few properties
2. use th/td:nth-child(#number) in CSS (my preferred solution, no idea about what happens with colspans)
3. manually add a class to the th/td elements
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
https://www.w3.org/TR/CSS22/tables.html#columns
You're not supposed to use the "width" HTML attribute, instead use style/CSS. In the style/CSS for <col> you're supposed to use only "border", "background", "width" and "visibility". You can use ems to express values.
I'm confused: w3 says "The 'width' property gives the minimum width for the column." which looks contradictory to me, given the existence of a "min-width" property. On Firefox 72 (Ubuntu)
<col style="width: 13em">
sets a "fixed" width (as I expected). If I resize the window, narrowing it, the column is resized and the content is wrapped into more lines.
So I just had this same issue... the real problem is that even when style/CSS is used on <col> (rather than HTML attributes), you can still only style the following things:
width
borders
background colors
visibility
Source: https://www.w3.org/TR/CSS21/tables.html#columns
It is working for me like this with colgroup and col
<colgroup align="center">
<col style="background-color:red">
<col style="background-color:yellow">
<col style="background-color:green">
</colgroup>