he guys i have a annoying issue i need your help i have a picture which size is:
W:814px
H:685
should be placed on the left side of the page ,I have a table which should be placed on the right side of the page,I thought I can achieve it with a simple bootstrap below:
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="" alt="">
</div>
<div class="col-sm-6">
<table>
</table>
</div>
</div>
</div>
but it becomes like the screen shot i have added here
i dont wana change the size of the pic
Here everything looks better with bootstrap latest version! Could you inspect your page
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="https://unsplash.it/640/425" class="img-fluid"/>
</div>
<div class="col-sm-6">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Related
<div class="table-responsive">
<table class="table">
<thead>
Head
</thead>
<tbody>
<tr>
<td>
<div class="row">
<div class="col-lg-6">Item 1.0</div>
<div class="col-lg-6">Item 1.1</div>
</div>
</td>
<td>
<div class="row">
<div class="col-lg-6">Item 2.0</div>
<div class="col-lg-6">Item 2.1</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
This code creates a table where all items are in the same line. I have searched the css file but there is nowhere defined inline or inline-block, so I guess this is normal bootstrap behavior. What I am trying to achieve is to show items with prefix 1 one after another and same for items with prefix 2, but I want them all in same row. I have tried using <ul> with <li> elements, but they are also showed in the same line for some reason.
My table should contain only two columns and one header above them all. This is what I get now:
Issue is due to column classes - col-lg-6 which makes divs use equal width of parent td, use class col-lg-12 to use complete td width, please check the css of these classes below
.col-lg-12 {
width: 100%;
}
.col-lg-12 {
width: 50%;
}
Run below code
favorite
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table">
<thead>
Head
</thead>
<tbody>
<tr>
<td>
<div class="row">
<div class="col-lg-12">Item 1.0</div>
<div class="col-lg-12">Item 1.1</div>
</div>
</td>
<td>
<div class="row">
<div class="col-lg-12">Item 2.0</div>
<div class="col-lg-12">Item 2.1</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
codepen for reference - https://codepen.io/nagasai/pen/xybpMm
I don't understand yet why you need to use bootstrap grid system inside the table when the td's are designed to work like that. You're also using col-lg-6 which is equivalent to 2 td's inside 1 tr since there is no collapse (lg).
You'll have a similar output if you use this code;
<h6>Default:</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th colspan='2'>
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Item 1.0
</td>
<td>
Item 1.1
</td>
</tr>
<tr>
<td>
Item 2.0
</td>
<td>
Item 2.1
</td>
</tr>
</tbody>
</table>
</div>
<br>
<h6>Two Columns Only:</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th colspan='4'>
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Item 1.0
</td>
<td>
Item 1.1
</td>
<td>
Item 2.0
</td>
<td>
Item 2.1
</td>
</tr>
</tbody>
</table>
</div>
I want to create a responsive table with bootstrap and I divide the width of the table into 8-2-2 for 3 columns respectively.
Firefox can display it correctly but not in chrome.
<table id="tbl_sample" class="table table-hover">
<thead>
<tr>
<th class="col col-lg-8 col-md-8 col-sm-8 col-xs-8">text1</th>
<th class="col col-lg-2 col-md-2 col-sm-2 col-xs-2">text2</th>
<th class="col col-lg-2 col-md-2 col-sm-2 col-xs-2">text3</th>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>HIJ</td>
</tr>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>HIJ</td>
</tr>
</tbody>
</table>
Any idea? I have attached the full code here
https://jsfiddle.net/ocnrm6j7/
I want to pull data from DB and list it in a table.
The screen size is fixed and they shall not be extended(no scrolling).
Once there is no more "space" for table1, I want that the following items to be listed on a sided table2. So I don't want that the screen gets extended, scrolled.
This is how my code is.
<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TIME</th>
<th style="background-color: transparent">LOCATION</th>
<th style="background-color: transparent">MESSAGE</th>
</tr>
</thead>
</table>
</div>
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TIME</th>
<th style="background-color: transparent">LOCATION</th>
<th style="background-color: transparent">MESSAGE</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
This picture shows how I want my implementation:
Thanks in advance.
I'd like you to try this "column-count"-techique:
div {
column-count: 4;
column-width: 150px;
column-rule: 1px solid slategrey;
}
https://codepen.io/rinatoptimus/pen/qqgBMN
The solution was to use the JSTL core begin and end attributes:
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TIME</th>
<th style="background-color: transparent">LOCATION</th>
<th style="background-color: transparent">MESSAGE</th>
</tr>
</thead>
<tbody>
<c:forEach items="${somedata}" var="data" begin = "0" end = "5">
<tr>
<td>${data.time}</td>
<td>${data.message}</td>
<td>${data.location}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TIME</th>
<th style="background-color: transparent">LOCATION</th>
<th style="background-color: transparent">MESSAGE</th>
</tr>
</thead>
<tbody>
<c:forEach items="${somedata}" var="data" begin = "6" end = "11">
<tr>
<td>${data.time}</td>
<td>${data.location}</td>
<td>${data.message}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
As using Bootstrap 4, I'm aware the .col-xs are dropped, instead of .col, I have tested on bootstrap 3.5 which I'm using
<div class="col-xs-4">
Table left side goes here
</div>
<div class="col-xs-8">
Table right side goes here
</div>
And it works fine, as you can see it from here.
however, it's a bit different on Bootstrap 4 Alpha.
<div class="col-2">
<h2 class="sub-header">Test Arear</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">Test</td>
</tr>
<tr>
<td class="col-md-1">Test 2</td>
</tr>
<tr>
<td class="col-md-1">Test 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-10">
<h2 class="sub-header">Ticket Number</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,002</td>
<td class="col-md-3">1,003</td>
</tr>
<tr>
<td class="col-md-1">1,004</td>
<td class="col-md-2">1,005</td>
<td class="col-md-3">1,006</td>
</tr>
<tr>
<td class="col-md-1">1,002</td>
<td class="col-md-2">1,021</td>
<td class="col-md-3">1,023</td>
</tr>
</tbody>
</table>
</div>
</div>
As you can see results from here.
I want it on the side by side table but it's not side by side. Am I missing something?
You need a row wrapper as bootstrap four is done on flex rather than floats so the columns now need to be wrapped to make them into columns
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet"/>
<div class="row">
<div class="col-2">
<h2 class="sub-header">Test Arear</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">Test</td>
</tr>
<tr>
<td class="col-md-1">Test 2</td>
</tr>
<tr>
<td class="col-md-1">Test 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-10">
<h2 class="sub-header">Ticket Number</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,002</td>
<td class="col-md-3">1,003</td>
</tr>
<tr>
<td class="col-md-1">1,004</td>
<td class="col-md-2">1,005</td>
<td class="col-md-3">1,006</td>
</tr>
<tr>
<td class="col-md-1">1,002</td>
<td class="col-md-2">1,021</td>
<td class="col-md-3">1,023</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Example Bootply
Why is centre alignment not working on ?
I was expecting the text to be centre aligned when i specify the class "center aligned" to my element but it does not.
However, if I specify the same class on all elements then it works.
Shouldn't it suffice when a class is specified at and all childrens inherit?
A fiddle is at http://jsfiddle.net/4woemsjt/4/
Basically this one does not work.
<div class="ui grid centered">
<div class="fourteen wide column">
<table class="ui celled collapsing table">
<thead>
<tr class="center aligned">
<th class="three wide">S1</th>
<th class="three wide">S2</th>
<th class="two wide">S3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
But this one does
<div class="ui grid centered">
<div class="fourteen wide column">
<table class="ui celled collapsing table">
<thead>
<tr>
<th class="center aligned three wide">S1</th>
<th class="center aligned three wide">S2</th>
<th class="center aligned two wide">S3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
you need to add the "center aligned" to all th-elements.
".ui.table thead th" has "text-align:left" set as default in the .css file.