i am trying to set th width but it change only desktop view.
if i open that page in mobile table th not properly set.
i have also try col-xs-2 to fix th but it is not work
<div class="form-group col-lg-12 col-md-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-xs-12 col-md-offset-1">
<div class="row" >
<div class = "table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr class="info">
<th class="col-md-2 col-xs-2" > No</th>
<th class="col-md-4 col-xs-4">Dish Name</th>
<th class="col-md-2 col-xs-2"> Size</th>
<th class="col-md-2 col-xs-2">Prize</th>
<th class="col-md-2 col-xs-2">Order</th>
</tr>
</thead>
<tbody>
<tr title="Order Chicken Kadhai">
<td >1</td>
<td >Chicken Kadhai</td>
<td >Full</td>
<td >150/-</td>
<td ><input type="button" class="btn btn-info" value="ORDER"> </td>
</tr>
<tr>
<td >2</td>
<td >Chicken Roast</td>
<td >Full</td>
<td >250/-</td>
<td ><input type="button" class="btn btn-info" value="ORDER"> </td>
</tr>
<tr>
<td >3</td>
<td >Chicken Tandori</td>
<td >Full</td>
<td >350/-</td>
<td ><input type="button" class="btn btn-info" value="ORDER"> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
how can we set th to responsive table
From comments:
columns are not made for use in tables. .table-responsive adjusts
itself according to the content.
use this code might be help for you
<div class="table-responsive">
<table class="table">
...
</table>
</div>
write <class=".table-responsive>" instead of class=<class="table-responsive>"
Related
How to remove gap between two td ? I have tried some below solutions
from the Internet but none of them work. Attached the screenshot for
reference too. It will give clear idea of problem. The gap between two TD is very wide. How to reduce this Gap.
class="align-middle"
CELLSPACING=0
row-gap: 0;
class="views-field views-field-region views-align-center"
<app-header></app-header>
<section class="container">
<div class="row" style="background-color: white;">
<div class="col-xs-12 col-sm-8 col-md-4" >
<form action="/update/pricelist" method="POST" id="upload-file" enctype="multipart/form-data">
<h3>Import Pricelist</h3>
<hr>
<div class="wrapper-messages">
</div>
<br>
<input type="file" name="price_list" id="edit_price_list" (change)="ReadExcel($event)">
<div class="error-msg"></div>
<hr>
<div class="views-exposed-widget views-submit-button">
<button type="submit" class="btn btn-info form-submit icon-before submit-pricelist">
<span class="icon glyphicon glyphicon-ok" aria-hidden="true"></span>
Import
</button>
</div>
<br>
</form>
</div>
</div>
</section>
<!-- Table for excel -->
<div class="main-container container-fluid">
<div class="row">
<section id="block-views-exp-land-page" class="block block-views clearfix">
<form autocomplete="off" action="" method="post" id="views-exposed-form-land-page" accept-charset="UTF-8">
<div>
<section id="block-system-main" class="block block-system clearfix">
<div
class="view view-land view-id-land view-display-id-page table-checkbox-all view-dom-id-8d32f83bab6c36c396b926a7c7c35f7f">
</div>
<div class="view-content">
<div class="table-responsive" class="col-10" class="row align-items-center" class="col-md-12">
<table class="views-table cols-16 table table-hover table-0 table-0 table-0 neilsoft-region-table">
<thead class="neilsoft-region-table-head">
<tr>
<th class="views-field views-field-region views-align-center">
Autodesk Material Description
</th>
<th class="views-field views-field-php-4 views-align-center">
Autodesk SAP Material Description
</th>
<th class="views-field views-field-php-2 views-align-center">
Product Coming From
</th>
<th class="views-field views-field-php-2 views-align-center">
Media
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="view-content">
<div class="table-responsive" class="col-10" class="row align-items-center" class="col-md-12">
<table class="views-table cols-16 table table-hover table-0 table-0 table-0 neilsoft-region-table">
<thead class="neilsoft-region-table-head">
<tr *ngFor="let pricedata of ExcelData" class="align-middle">
<td>
{{pricedata.Autodesk_Material_Description}}
</td>
<td>
{{pricedata.Autodesk_SAP_Material_Description}}
</td>
<td>
{{pricedata.Product_Coming_From}}
</td>
<td>
{{pricedata.Media}}
</td>
</tr>
</thead>
</table>
</div>
</div>
</section>
</div>
</form>
</section>
</div>
</div>
<app-footer></app-footer>[enter image description here][1]
I suggest you looking for html table colspan (https://html.com/tables/rowspan-colspan/). With colspan you can merge two td cells. Take a look in the example below:
td {
width: 30px;
}
<table border="1">
<tr>
<td colspan="2">Merged</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Perhaps border-collapse: collapse; is what you’re missing?
td {
background: red;
color: white;
padding: 0.5em;
}
.t1 {
margin-top: 2em;
border-collapse: collapse;
}
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
<table class="t1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
I need to make 2 Tables with vertical alignment.
so I made 2 div which one is "col-lg-10", another one is "col-lg-5"
I think it works with 1-Table and Half-Table exactly
but it doesn't work exactly, it's a little bit different.
[col-lg-10 / col-lg-5] , I think 10 is exactly half value of 5....
why doesn't it work?
<div class="table-responsive col-lg-10">
<table class="table table-bordered">
<tr>
<td class="col-lg-1">ABC</td>
<td class="col-lg-1">DEF</td>
<td class="col-lg-2" style="word-break:break-all">FGGFGGFGGFGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGG</td>
<td class="col-lg-1">342</td>
<td class="col-lg-1">ABc</td>
<td class="col-lg-1">DDF</td>
<td class="col-lg-1">AvV</td>
<td class="col-lg-1">DXZ</td>
<td class="col-lg-1">QQW</td>
</tr>
</table>
</div>
<div class="table-responsive col-lg-5">
<table class="table table-bordered">
<tr>
<td class="col-lg-2">ABC</td>
<td class="col-lg-3">DEF</td>
</tr>
</table>
</div>
Result ScreenShot
check the image this is regarding col*
here is the code after correction you can change the offset value as we want
<div class="row">
<div class="col-lg-10 col-md-10 col-md-10 offset-sm-1 col-sm-offset-2 col-md-offset-2">
<div class="table-responsive">
<table class="table table-bordered">
<tr class=row>
<td class="col-lg-1">ABC</td>
<td class="col-lg-1">DEF</td>
<td class="col-lg-2" style="word-break:break-all">FGGFGGFGGFGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGG</td>
<td class="col-lg-1">342</td>
<td class="col-lg-1">ABc</td>
<td class="col-lg-1">DDF</td>
<td class="col-lg-1">AvV</td>
<td class="col-lg-1">DXZ</td>
<td class="col-lg-1">QQW</td>
<td class="col-lg-1">QQW</td>
<td class="col-lg-1">QQW</td>
</tr>
</table>
</div>
</div>
<div class="col-lg-5 offset-sm-4 ">
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<td class="col-lg-2">ABC</td>
<td class="col-lg-3">DEF</td>
</tr>
</table>
</div>
</div>
</div>
I have a html table whose headers need to be fixed. I am using bootstrap classes to make html headers fix, but i see many issues with that.
Please find the sample here.
Issues i'm facing are Header is not displayed starting from first column, word wrap is not applied for the columns header or the columns. Please advice. Is there any better way to solve this.
html code:
<div class="modal-body" id="modal-body">
<table id="myTable" class="table table-fixedheader table-bordered table-striped"> <thead>
<tr class="row"><th class="col-md-7">Header1</th><th class="col-md-4">Header2</th><th class="col-md-3">Header3</th><th class="col-md-4">Header4</th></tr>
</thead><tbody>
<tr><td>1111</td><td>33333</td><td>1111</td><td>3333322222222222222222222222222222</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>112222222222222215555555551</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> <tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> <tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
</tbody> </table>
</div>
1.) The cells in your header tr have Bootstrap classes which add up to a width of 18 columns (7+4+3+4), but one row can only fit 12 columns in the bootstrap grid system.
2.) You write that wordwrap is not applied, but you don't have any CSS rules for wordwrap anywhere.
You're using class .row on one row only :
<tr class="row">
<th class="col-md-7">Header1</th>
<th class="col-md-4">Header2</th>
<th class="col-md-3">Header3</th>
<th class="col-md-4">Header4</th>
</tr>
You either use the same class on each row or just delete it and leave the rows without a class.
<tr></tr>
this would fix your issue.
Only simple thing missed is using the same structure (Or CSS classes), I've checked the code from your fiddle and this should work for the scenario you've presented.
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" id="modal-body">
<table id="myTable" class="table table-fixedheader table-bordered table-striped table-scroll">
<thead>
<tr class="row">
<th class="col-md-3">Header1</th>
<th class="col-md-4">Header2</th>
<th class="col-md-3">Header3</th>
<th class="col-md-4">Header4</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5443545435354543</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5437665</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5435435443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">68678454</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">786876</td>
<td class="col-md-3">8787876</td>
<td class="col-md-4">6765767</td>
</tr>
<tr class="row">
<td class="col-md-3">7656765</td>
<td class="col-md-4">656456</td>
<td class="col-md-3">116611</td>
<td class="col-md-4">43434</td>
</tr>
<tr class="row">
<td class="col-md-3">43243432434324342</td>
<td class="col-md-4">33344343233</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">4343</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">432434343243243</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">432443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">333333</td>
<td class="col-md-3">111312312123121</td>
<td class="col-md-4">32112</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Okay:
For Word-wrap in continuous text
add " word-break: break-all;" (see the CSS below)
FOR Fixed Header
Refer the 'table-scroll' class in the HTML markup above
AND
Add the following CSS:
.modal-body {
/*max-height: calc(100vh - 210px);*/
height:300px;
width:90%;
overflow: hidden;
word-break: break-all;
}
.table-scroll tbody {
position: absolute;
overflow-y: scroll;
height: 400px;
}
.table-scroll tr {
width: 100%;
table-layout: fixed;
display: inline-table;
}
.table-scroll thead > tr > th {
border: none;
}
repalce this
<tr class ="row" >
with this
<tr>
your updated fiddle http://jsfiddle.net/girish28892/ZcLSE/1431/
I have this picture below that I want to convert into web from a windows. I manage to do the design but I have a problem in the grid (I am using data tables in bootstrap) I can't do the design in what in the picture like.
<table>
<tr>
<td>
<div>
<input type="radio" />
Radio Button
</div>
</td>
<td>
<input type="radio" />
Radio Button
</td>
</tr>
<tr>
<td>
<div>
<input type="text" />
</div>
</td>
<td>
< div>
< input type="button" />
</div>
</td>
</tr>
</table >
<table >
<tr>
<td>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
< i class="fa fa-list fa-fw" >< / i >Table
< /div >
< /div>
< /div>
< !-- /.panel-heading -->
< div class="panel-body">
< div class="dataTable_wrapper">
< table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 100%;" id="dataTables-xxxx">
</table>
</div>
</div>
</div>
</div>
< /div>
</td>
<td>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
< i class="fa fa-list fa-fw"></i>Table
< /div>
< /div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 100%;" id="dataTables-xxasdxx">
</table>
< /div>
< /div>
< /div>
< /div>
< /div>
</ td>
< /tr>
< /table>
My 2 Images bellow:
Try the below design hope it helps.You can customize the column property as your desire I just added the basic skeleton.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="row">
<div class=" col-sm-12 form-group">
<div class=" col-sm-2">
<input type="radio" />
Radio Button
</div >
<div class=" col-sm-2">
<input type="radio" />
Radio Button
</div >
</div >
<div class=" col-sm-12 form-group ">
<div class=" col-sm-2">
<input type="text" class="form-control" id="usr">
</div>
<div class=" col-sm-2">
<button type="button" class="btn btn-default">Submit</button>
</div>
</div>
<div class="table-responsive col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-2">Header</th>
<th class="col-md-3">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-2">Header</th>
<th class="col-md-3">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Or See the below fiddle for a better look
table design demo fiddle (updated)
You can also, do something like this instead of using tables for layout and mimic as close as to your conversion UI.
table tags are meant primarily for data formatting. Bootstrap has the concept of grid layout which is meant for laying out your UI without using tables.
When you open the snippet in full screen, you would see the exact replica. However, when the screen is too small to fit in your entire content, it just wraps into the next row, giving you the flexibility to build responsive layout, which is not possible with table tags.
.custom-margin {
margin-top: 10px;
margin-bottom: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom-container">
<div class="radio">
<label class="radio-inline">
<input type="radio" name="" id="optionsRadiosOne" value="optionOne">Radio Button One
</label>
<label class="radio-inline">
<input type="radio" name="" id="optionsRadiosTwo" value="optionTwo">Radio Button Two
</label>
</div>
<div class="custom-margin">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Enter Email :</label>
<input type="text" class="form-control" placeholder="Enter Email">
</div>
<button type="submit" class="btn btn-primary">Send invitation</button>
</form>
</div>
<div class="row">
<div class="col-lg-3">
<table class="table table-hover">
<tr>
<td>Header One
</td>
<td>Header Two
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
</table>
</div>
<div class="col-lg-6">
<table class="table table-hover">
<tr>
<td>Header One
</td>
<td>Header Two
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
</table>
</div>
</div>
</div>
I have a bootstrap table with 8 columns and several rows and I would like to show this table with scroll bar when the size of screen is reduced because otherwise tha table get off the wrapper layout. The problem is that the scroll bar is ever show and whereas it is quite ugly I would like to show only when it is necessary, how can I do it?
Is it better to use jQuery plugin like this table collapse
<div class="panel-body">
<div class="table-responsive">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover"
id="fleetsTable">
<thead>
<tr>
<th>Application</th>
<th>Cubic</th>
<th>Power</th>
<th>Euro class</th>
<th>Engine Type</th>
<th>Traction</th>
<th>Transmission</th>
<th>Cars</th>
<th>Add Car</th>
</tr>
</thead>
<tbody>
<tr th:each="fleet : ${fleets}" class="odd gradeX">
<td class="col-xs-2" th:text="${fleet.application}"></td>
<td class="col-xs-1" th:text="${fleet.cubic}"></td>
<td class="col-xs-1" th:text="${fleet.power}"></td>
<td class="col-xs-1" th:text="${fleet.euroClass}"></td>
<td class="col-xs-1" th:text="${fleet.engineType}"></td>
<td class="col-xs-2" th:text="${fleet.traction}"></td>
<td class="col-xs-2" th:text="${fleet.transmission}"></td>
<td class="col-xs-1"><button id="showCarsButton"
type="button" class="btn btn-primary">Show cars</button></td>
<td class="col-xs-1"><button id="addCarButton"
type="button" class="btn btn-primary">Add car</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.panel-body -->
</div>
use this
table style="overflow:auto"