I am re-doing the front-end of an application using bootstrap 4. The application uses tables in some places that I wish it didn't so I am re-working those tables into a .row/.col grid system. The nice part about tables in bootstrap is that there appear to be styling options available for tables but none seem to exist for rows and columns. You can see in the snippet that it's automatically styling the table but how can I do that using grid?
For example:
<!DOCTYPE html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<thead class="thead-light">
<th>Thing one</th>
<th>Thing two</th>
<th>Thing Three</th>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
</tr>
</tbody>
</table>
<div class="container">
<div class="row">
<div class="col">
Thing one
</div>
<div class="col">
Thing two
</div>
<div class="col">
Thing three
</div>
</div>
<div class="row">
<div class="col">
One
</div>
<div class="col">
Two
</div>
<div class="col">
Three
</div>
</div>
<div class="row">
<div class="col">
Four
</div>
<div class="col">
Five
</div>
<div class="col">
Six
</div>
</div>
<div class="row">
<div class="col">
Seven
</div>
<div class="col">
Eight
</div>
<div class="col">
Nine
</div>
</div>
</div>
</body>
You'd add CSS to get the same styles...
.grid-striped .row:nth-of-type(odd) {
background-color: rgba(0,0,0,.05);
}
Or, use the Bootstrap 4 utilities (ie: font-weight-bold, bg-light, etc..) but these would need to be applied individually and won't automatically alternate odd rows like the CSS above.
Demo: https://www.codeply.com/go/IDBemcEAyL
Also remember that table columns can use the grid
Related
Hey i've got the following problem when i am trying to use the bootsrap 4 responsive table.
If there isnt evenough in the table to fill the complete width its look like this.
Layout of Table
My code is the following:
<div class="container" id="maincontainer">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>Bevorstehende Veranstaltungen:</p>
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p>Vergangene Veranstaltungen:</p>
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">30.06.2017 15:30 - 16:00</th>
<td>2/2</td>
<td>dafdfsfa</td>
<td>97</td>
</tr>
</tbody>
</table>
</div>
I hope anyone can help me.
Best Regards
Alex
That's because you have 2 separate tables with 2 different lengths of text in the first column. The only way I can think to make the first columns exactly the same width is to have the exact same amount of characters in them, i.e. add a date and time stamp to the first table.
You can set width in js also, give same width
like
$('.table').dataTable( {
"columnDefs": [
{ "width": "30%" },
{ "width": "20%" },
{ "width": "20%" },
{ "width": "30%" },
]
} )
In bootstrap table, the width of the column will be depends on the data.
If you want columns on both table as same width, I think the <div> may be useful instead of Table.
<p>Bevorstehende Veranstaltungen:</p>
<div class="row">
<div class="col-md-3">
<b>#</b>
</div>
<div class="col-md-3">
<b> First Name</b>
</div>
<div class="col-md-3">
<b> Last Name</b>
</div>
<div class="col-md-3">
<b>Username</b>
</div>
</div>
<br />
<p>Bevorstehende Veranstaltungen:</p>
<div class="row">
<div class="col-md-3">
<b>#</b>
</div>
<div class="col-md-3">
<b> First Name</b>
</div>
<div class="col-md-3">
<b> Last Name</b>
</div>
<div class="col-md-3">
<b>Username</b>
</div>
</div>
<div class="row primary-bordered-table">
<div class="col-md-3">
30.06.2017 15:30 - 16:00
</div>
<div class="col-md-3">
2/2
</div>
<div class="col-md-3">
dafdfsfa
</div>
<div class="col-md-3">
97
</div>
</div>
Then the column will be like in the following image
I'm trying to create a complex layout using table in twitter-bootstrap. However, I'm not able to get it perfectly right! Particularly, where 5 is displayed!
Is it possible to achieve the same using div's instead? How would I get the borders in that case?
Please check the design attached.
<div class="container">
<table class="table table-bordered" style="width:80%">
<tr>
<td class="col-md-6" colspan="4"><strong>1</strong></td>
<td class="col-md-4" rowspan="3"><img src="#" /></td>
<td class="col-md-2" rowspan="3"><button class="del-icon">X</button></td>
</tr>
<tr>
<td class="col-md-3"><strong>2</strong></td>
<td class="col-md-3"><strong>3</strong></td>
</tr>
<tr>
<td><strong>4</strong></td>
<td><strong>5</strong></td>
</tr>
</table>
</div>
Yes it is possible, you just add row to 2,3 then another row for 4,5
<div class="row">
<div class="col-md-6 blue1">
1
<div class="row">
<div class="col-md-6 blue2">2</div>
<div class="col-md-6 blue3">3</div>
</div>
<div class="row">
<div class="col-md-2 blue4">4</div>
<div class="col-md-10 blue5">5</div>
</div>
</div>
<div class="col-md-4 blue6">
img
</div>
<div class="col-md-2 blue7">
x
</div>
Bootply: http://www.bootply.com/mraM3WKCvt
Hope that helps, cheerio!
There is a gap between elements of an input group, if put into a table.
<link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<p>This is fine</p>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<div class="input-group-addon">a</div>
<div class="input-group-addon">b</div>
</div>
</div>
</div>
<table>
<tr>
<td>There is a gap between spans in tables</td>
</tr>
<tr>
<td>
<div class="input-group">
<div class="input-group-addon">a</div>
<div class="input-group-addon">b</div>
</div>
</td>
</tr>
</table>
How can I get rid of this gap?
You could try removing the border-spacing added by the table. Alternatively, you can set the border-collapse to collapse if you prefer the way that looks.
border-spacing is inherited by default in CSS by child elements. input-group is set to display: table which means it inherits the borders-spacing: 2px from the parent table. This means it will be applied to input-group-addons since they are being displayed as table cells.
table .input-group {
border-spacing: 0;
}
<link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<p>This is fine</p>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<div class="input-group-addon">a</div>
<div class="input-group-addon">b</div>
</div>
</div>
</div>
<table>
<tr>
<td>Previously a gap between elements</td>
</tr>
<tr>
<td>
<div class="input-group">
<div class="input-group-addon">a</div>
<div class="input-group-addon">b</div>
</div>
</td>
</tr>
</table>
Im generating a table in php, and would like it in the top left of the screen.
The table varies slightly in width so directly to the right of it should go two blocks of text (text1, text2) and a third text (text3) which floats in the topmost right of the screen.
Below the three texts should be text4.
Requirements:
Text1 needs to always be to the right of the table.
text4 always needs to be below the top 3 texts.
I uploaded an image with the span/div/table/text and have literally been trying to arrange these for about 1.5 hours now. it seems like it should be really simple but im struggling with my requirements and one of them always seems to misalign. (all the 'texts' are just pieces of html text (not <input type=text or <textarea>)
Edit: Thankyou, is it possible without using libraries or bootstrap?
If you don't like using <table> tags for layouts, and don't like an extra large dependency to your project (like bootstrap), one could go for the following option:
<div class="table">
Table
</div>
<div class="text-container">
<div class="text1">
Text1
</div>
<div class="text2">
Text2
</div>
<div class="text3">
Text3
</div>
<div class="text4">
Text4
</div>
</div>
It is crucial that the display type of .table, .text-container and .text{1,2,3} are all display: inline-block;. This will make them inline. However, to force wrapping of .text4, this will still have to be display: block;.
https://jsfiddle.net/nnLofpL1/
Like hjardine uses in his example: it may also be a good idea to look to the clear property.
However it is not the nicest solution, the classic "table in table" does the job:
<table>
<tr>
<td>
<table>
<tr>
<td>PHP generated data</td>
</tr>
</table>
</td>
<td>
<table>
<tr style="height: 60px;">
<td>Text 1</td>
<td style="padding-left: 100px;">Text 2</td>
<td style="width: 200px; text-align: right;">Text 3</td>
</tr>
<tr style="height: 60px;">
<td colspan="3">Text 4</td>
</tr>
</table>
</td>
</tr>
</table>
https://jsfiddle.net/jrrfbqfk/
I can see you don't want to use bootstrap so i have updated an answer so that you don't have to use a table either, exact same output but without the problems of using a table for output.
.div1{float:left;width:40%;border:1px solid #000;min-height:200px;}
.div2{float:right;width:58%;border:1px solid #000;min-height:200px;}
.row1{min-height:100px;}
.sp1{float:left;width:30%;padding:4px;border:1px solid #000;min-height:60px;}
.sp2{float:left;width:30%;padding:4px;border:1px solid #000;min-height:60px;}
.sp3{float:right;width:30%;text-align:right;padding:4px;border:1px solid #000;min-height:60px;}
.divRow{width:100%;border: 1px solid #000;}
<div>
<div class="div1">
<div class="divRow">1</div>
<div class="divRow">2</div>
<div class="divRow">3</div>
<div class="divRow">4</div>
<div class="divRow">5</div>
<div class="divRow">6</div>
</div>
<div class="div2">
<div>
<div class="row1">
<div class="sp1">1</div>
<div class="sp2">2</div>
<div class="sp3">3</div>
<div style="clear:both;"></div>
</div>
<div class="row2" style="border:1px solid #000;min-height:40px;">
sadsadsad
</div>
</div>
</div>
<div style="clear:both;">
</div>
</div>
An easy solution to laying out a page so that things are where you want them is using bootstrap, because of the grid layout in bootstrap you can keep things in the same relative positions no matter what the size of the page is.
For what you want to do i think it would benefit you greatly.
EXAMPLE
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="Container">
<div class="row">
<div class="col-xs-2">
Top left
</div>
<div class="col-xs-2 col-xs-offset-8">
Top right
</div>
</div>
</div>
This is a link to Bootstrap which is well worth learning IMHO!
I need the following type of table in html
i.e., with fused rows in the second column (one entity). Basically, there would be text in the four non-fused cells and an image in the fused ones. How can I do this? If there is a way wherein I can avoid the use of tables, that would be better.
You need to use rowspan="4" attribute in the second TD of the first row. e.g.
<table>
<tr>
<td></td>
<td rowspan="4"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
This specifies that the second cell in the first row spans over 4 rows. Notice that in the 2nd to 4th rows there is no need to specify a second column as that is already specified in the first row.
However: if you are using this just for layout then I would avoid the table altogether and use some divs and CSS to achieve the same result.
<div class="outer">
<div class="left">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="right">
<!-- image here -->
</div>
<br style="clear:both;"/>
</div>
And CSS:
.left{
float:left;
}
.right{
float:left
}
You can find some good advice on this layout in this answer.
Or with Bootstrap:
<div class="row">
<div class="col-md-6">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<div class="col-md-6">Your Image Here</div>
</div>