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/
Related
The modal is like this:
modal
I would really like to widen the window so that it is pleasant to the user.
How to do this on Bootstrap or CSS, please?
<div class="modal-header">
<h4 class="modal-title" id="modal-error-title">Une erreur s'est produite</h4>
<button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="close()"></button>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col" style="width: 20%">type </th>
<th scope="col" style="width: 20%">Code erreur </th>
<th scope="col" style="width: 60%">Message </th>
</tr>
</thead>
<tbody>
<tr>
<td>Warning</td>
<td>SCH00</td>
<td>COMAddError in error for RTG SCH00</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-primary" (click)="close()">Fermer la fenêtre </button>
</div>
You can try adding .modal-lg or mx-5 and if even that is not enough for you, you can declare id for elements and can manually increase their size or just add more padding if you would.
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>
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.