This question already has an answer here:
How to use Bootstrap 3 grid system with table component?
(1 answer)
Closed 8 years ago.
First I was using a table to layout some elements in my page, with the <table> <thead> etc... tags.
Then I found that bootstrap has a grid system, and I want to use it for laying out my elements. This went ok for the layout, with <div class="row"> for each <tr> tag and <div class="col-md-12"> for each <td> tag.
However I would like to use some styling provided by bootstrap, such as available for the table at this first example. Is this possible or available?
Right now I just get the layout, but no separation (e.g. borders) between rows like with the table example. Am I going at this the wrong way, or is there actually a way to style this grid in a table like fashion, and how would I do this?
if you want to add further styles to your boostrap, include an extra style sheet in your HTML, and give your HTML elements an extra class with styling outlined in your added stylesheet. put your class after the bootstrap class when calling it.
so, your html would be
<div class="row my_special_style_class">
I actually found out fairly quick after asking, how to achieve what I wanted.
You can just use the regular html <table class="table"> (and related) tags for the layout and apply the col-md-6 type classes to the header tags. This way it is styled as a table, but it behaves like a bootstrap grid.
I thought it was required to use div tags for the layout, because all the examples i've seen on the internet used (and said to use) the div tags instead of table tags.
If you're looking to show tabular data, with the lines and styling you like from Bootstrap, use a table and apply the classes that Bootstrap provides (e.g. <table class="table table-striped">).
I like to go to
http://getbootstrap.com/css/#tables
and use Chrome DevTools or Firebug to inspect the table examples they have on the page. It's much more precise and to the point than reading through their explanations sometimes :)
However, if you just kind of like the lines and stripes, but are just laying out a page (but not using tables), the answer is that you must implement those borders yourself in your own CSS.
Hope that helps.
Related
I'm working on a project, an ordering website for a client. I'm not a designer but what I usually do is use bootstrap and modify it based on my needs. Usually, I do the backend and some design.
There is already a prepared design for home page which I will structure in html/css.
I have a simple question for designers. Is it better to use <div>s with nested tags or use <td>s to contain images and other elements in the design screenshot below?
I know there are good reasons and pros and cons for every tag you decide to use. I just thought it would be better to ask.
I'd appreciate any comment or answer to this.
It is better to use divs as they can be made responsive.
Tables are cumbersome and non-responsive.
I highly suggest using Bootstrap framework for such purpose.
https://startbootstrap.com/template-overviews/thumbnail-gallery/
https://mobirise.com/bootstrap-gallery/
If you are using bootstrap then it's good to have div managed with class like row and col-md. It is always suggested to avoid table for such kind of thing. With bootstrap you can easily manage this. You can this link.
I am using foundation 6 in a new project and stumbled upon an issue.
I have a grid with and I want to hide a column (which I want to show again later), the problem is that if I hide the column, it does not reorder all the other columns, I tried by just hiding it with jQuery and by hiding it with Foundation's hide class (which, I guess, is basically the same thing).
The only way I was able to achieve the wanted functionality is by actually removing the column completely, but I need to show it again later so this is not an option.
Please take a look at the fiddle to maybe get a better idea of what I need.
(You will have to Run the script again after click one of the buttons)
JsFiddle link
The primary issue is you are not using the classes properly, for example the size of column should be applied to the column not the row elements.
<div class="column">
Should be:
<div class="small-4 column">
https://jsfiddle.net/875ascsk/4/
I am working on a simple application that displays a table based on selected features and companies a user wants to compare. I am using Bootstrap 3 but because of the way my code works, I cannot use DataTables. I want the table header to float, and I have tried quite a few methods to get this to work. This includes JavaScript/JQuery/CSS solutions on the table header and JS/CSS solutions on tbody scrolling.
One problem is that my code destroys and rebuilds the table every time a user changes their selections. I am pretty new to Web development and this is the only thing so far that has really given me issues. I would really appreciate any help! Thanks in advance!
Link to working version: http://www.buyvm.theoks.net/b-rant/EHR_Tool/EHR_Form.php
Floating headers / scrolling tbody is just not viable in HTML right now. It seems the best you can do is have two tables: the first for the headers, and the second for the body wrapped in a <div style=overflow: auto;></div> and hope the columns line up.
<table><tbody> scrollable?
How can I let a table's body scroll but keep its head fixed in place?
I have one real requirement: Automated Pagination from html.
That is I want to generate an HTML table with Django, and for the Plugin decide on which <tr> item to split it up (based on a configurable setting, or browser size - i.e. something like automatically designate items to further pages if the content overflows the div).
Well and secondly I guess interactive row sorting (but all plugins seem to do this).
I'd greatly prefer to make the table in the HTML part of the template rather than to generate it with Javascript using Json data. Also please don't recommend Django-tables2, it's absolutely horrendous.
Okay so I am making a website to display the last eight entres from a database and display them in a grid format, but the grids aren't displaying correctly they are displaying like so:
1 :
But I am wanting them to display similar to this:
I ment to draw an extra column on the drawing sorry. And no mater what stay in the same column and row as it should be but also be underneath the one above it. The code is on my jsfiddle here: http://jsfiddle.net/PGdMd/
Also The css needs to be responsive because the content text for each div will change depending on the data entered in the mySQL database.
<h1>Sorry it made me put this here</h1>
Reading from related questions, it would seem you want jQuery's masonary. Either that, or Isotope.
Have a look at Masonry. This is a jQuery plugin that will do what you want and a lot more.
http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
Have you considered some of the css frameworks that can be used to easily implement layouts? Blueprint, 960 Grid, Twitter Bootstrap, foundation, etc. There are a lot of 3 column implementations available that would not only make this easy, but would simplify your project in general.