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>
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>
Trying to put two tables next to one another. One col-md-4 and the other col-md-8 I want the 4 to be on the left and the 8 to be on the right. Left table being game messages and buttons while the right table is the tic tac toe board. My understanding is when using bootstrap I just need columns to add up to a total of 12.
</head>
<body class="bodyNormal">
<div class="container">
<div class="row">
<div class="col-md-12" style="text-align: center">
<h3 class="mainimg">Tic Tac Toe Game</h3>
</div>
</div>
<div class="row bg-white">
<div class="col-md-4">
<table class="table">
<tbody>
<tr>
<th>
<button class="btn" id="newGame">🔄 New game</button>
</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>
<h2 class="player1Turn hidden">Player 1 Turn</h2>
<h2 class="player2Turn hidden">Player 2 Turn</h2>
</th>
</tr>
</tbody>
</table>
<div class="col-md-8">
<table>
<tr>
<td class="grid">7<img src="X.jpg"</td>
<td class="vert grid">8<img src="O.jpg"</td>
<td class="grid">9<img src="X.jpg"</td>
</tr>
<tr>
<td class="hori grid">4<img src="O.jpg"</td>
<td class="vert hori grid">5<img src="X.jpg"</td>
<td class="hori grid">6<img src="O.jpg"</td>
</tr>
<tr>
<td class="grid">1<img src="X.jpg"</td>
<td class="vert grid">2<img src="O.jpg"</td>
<td class="grid">3<img src="X.jpg"</td>
</tr>
</table>
</div>
</div>
</div>
<br />
<script src="index.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
You forgot one div close for col-md-4
</table></div> /*Close Here One div*/
<div class="col-md-8">
https://jsfiddle.net/lalji1051/y0k4bs6p/3/
Problem is you forgot to close div for col-md-4.
Updated code
<div class="container">
<div class="row">
<div class="col-md-12" style="text-align: center">
<h3 class="mainimg">Tic Tac Toe Game</h3>
</div>
</div>
<div class="row bg-white">
<div class="col-md-4">
<table class="table">
<tbody>
<tr>
<th>
<button class="btn" id="newGame">🔄 New game</button>
</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>
<h2 class="player1Turn hidden">Player 1 Turn</h2>
<h2 class="player2Turn hidden">Player 2 Turn</h2>
</th>
</tr>
</tbody>
</table>
</div>
<div class="col-md-8">
<table>
<tr>
<td class="grid">7<img src="X.jpg" </td>
<td class="vert grid">8<img src="O.jpg" </td>
<td class="grid">9<img src="X.jpg" </td>
</tr>
<tr>
<td class="hori grid">4<img src="O.jpg" </td>
<td class="vert hori grid">5<img src="X.jpg" </td>
<td class="hori grid">6<img src="O.jpg" </td>
</tr>
<tr>
<td class="grid">1<img src="X.jpg" </td>
<td class="vert grid">2<img src="O.jpg" </td>
<td class="grid">3<img src="X.jpg" </td>
</tr>
</table>
</div>
</div>
</div>
I need to change the table width in bootstrap 4, as seen in the image the table doesn't use all the width of the page, this is the code in HTML.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div id="tabla">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table id="tabla_factura" class="table table-hover table-condensed table-bordered table-stripedcol text-center ">
<tr>
<th>No.</th>
<th>Vendedor</th>
<th>Reputacion</th>
<th>Titulo</th>
<th>Precio</th>
<th>Vendidos</th>
<th>Tipo de publicación</th>
<th>Direccion</th>
<th>Envio Gratis</th>
<th>Publicacion</th>
</tr>
<tr>
<td> </td>
<td></td>
<td> </td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
You can simply add width in the table and for the center, you can use mx-auto class.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.table {
width: 75%;
}
</style>
<div id="tabla">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table id="tabla_factura" class="table table-hover table-condensed table-bordered table-stripedcol text-center mx-auto">
<tr>
<th>No.</th>
<th>Vendedor</th>
<th>Reputacion</th>
<th>Titulo</th>
<th>Precio</th>
<th>Vendidos</th>
<th>Tipo de publicación</th>
<th>Direccion</th>
<th>Envio Gratis</th>
<th>Publicacion</th>
</tr>
<tr>
<td> </td>
<td></td>
<td> </td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
so after the text containing the emergency hotlines were aligned properly, I just cant seen to place the text under the image in order to present the data three in a row (I tried col-4 but json messed it up). My goal is image, then content of the numbers directly below it. I tried: text-align, float, display, media. any help would be appreciated thank you.
heres the current situation:
enter image description here
UPDATE: here is the JSfiddle of the question, placeholders are used to show the positioning. https://jsfiddle.net/ktbmLaq8/
<div class="module-text" ng-controller="VolunteerAidCtrl">
<p class="services-margin">In an emergency, please contact the appropriate service in their respective ASEAN countries for the proper response. These numbers can be called either on landline and mobile and consist of the Police Department, Fire Department, and the Hospital Ambulance. </p>
<hr>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." ng-model="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
<hr>
<div class="row">
<div class="col-md-6" ng-repeat="service in services | filter:search">
<div class="media">
<div class="media-left">
<img class="flagsize" ng-src="{{service.flagimgurl}}">
</div>
<div class="media-body">
<h4 class="media-heading country-title" ng-bind="service.country"></h4>
<table class="table">
<tr class="remove-border">
<td ng-bind="service.hl1"></td>
<td class="text-left">
<div ng-bind="service.hl1num1"></div>
<div ng-bind="service.hl1num2"></div>
<div ng-bind="service.hl1num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl2"></td>
<td class="text-left">
<div ng-bind="service.hl2num1"></div>
<div ng-bind="service.hl2num2"></div>
<div ng-bind="service.hl2num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl3"></td>
<td class="text-left">
<div ng-bind="service.hl3num1"></div>
<div ng-bind="service.hl3num2"></div>
<div ng-bind="service.hl3num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl4"></td>
<td class="text-left">
<div ng-bind="service.hl4num1"></div>
<div ng-bind="service.hl4num2"></div>
<div ng-bind="service.hl4num3"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_cambodia.png">
<table class="services">
<tr>
<td class="country-title">Cambodia</td>
</tr>
<tr>
<td>Fire</td>
<td>:114</td>
</tr>
<tr>
<td></td>
<td>:023 723 555</td>
</tr>
<tr>
<td>Police</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:023 366 841</td>
</tr>
<tr>
<td></td>
<td>:023 720 235</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:119</td>
</tr>
<tr>
<td></td>
<td>:023 724 891</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_indonesia.png">
<table class="services">
<tr>
<td class="country-title">Indonesia</td>
</tr>
<tr>
<td>Police</td>
<td>:110</td>
</tr>
<tr>
<td></td>
<td>:112</td>
</tr>
<tr>
<td>Fire</td>
<td>:113</td>
</tr>
<tr>
<td>Ambulance and Rescue  </td>
<td>:118</td>
</tr>
<tr>
<td>Medical Emergencies</td>
<td>:119</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_laos.png">
<table class="services">
<tr>
<td class="country-title">Laos</td>
</tr>
<tr>
<td>Fire</td>
<td>:190</td>
</tr>
<tr>
<td>Police</td>
<td>:191</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:195</td>
</tr>
</table>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_malaysia.png">
<table class="services">
<tr>
<td class="country-title">Malaysia</td>
</tr>
<tr>
<td>Fire and Rescue</td>
<td>:994</td>
</tr>
<tr>
<td></td>
<td>:114</td>
</tr>
<tr>
<td>Ambulance/Police  </td>
<td>:999</td>
</tr>
<tr>
<td></td>
<td>:112</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_myanmar.png">
<table class="services">
<tr>
<td class="country-title">Myanmar</td>
</tr>
<tr>
<td>Fire</td>
<td>:191</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:192</td>
</tr>
<tr>
<td>Police</td>
<td>:199</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_philippines.png">
<table class="services">
<tr>
<td class="country-title">Philippines</td>
</tr>
<tr>
<td>Disaster Risk    </td>
<td>:(02) 911-1406</td>
</tr>
<tr>
<td></td>
<td>:(02) 912-1406</td>
</tr>
<tr>
<td>Police</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:911</td>
</tr>
<tr>
<td>Fire</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:(02) 729-5166</td>
</tr>
<tr>
<td></td>
<td>:(02) 410-6319</td>
</tr>
<tr>
<td>Red Cross</td>
<td>:(02) 527-0000</td>
</tr>
<tr>
<td></td>
<td>:(02) 527-8385</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_singapore.png">
<table class="services">
<tr>
<td class="country-title">Singapore</td>
</tr>
<tr>
<td>Fire and Ambulance  </td>
<td>:995</td>
</tr>
<tr>
<td>Police</td>
<td>:999</td>
</tr>
</table>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_thailand.png">
<table class="services">
<tr>
<td class="country-title">Thailand</td>
</tr>
<tr>
<td>Police</td>
<td>:191</td>
</tr>
<tr>
<td></td>
<td>:1195</td>
</tr>
<tr>
<td>Fire</td>
<td>:199</td>
</tr>
<tr>
<td>Ambulance and Rescue  </td>
<td>:1554</td>
</tr>
<tr>
<td></td>
<td>:1669</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_vietnam.png">
<table class="services">
<tr>
<td class="country-title">Vietnam</td>
</tr>
<tr>
<td>Police</td>
<td>:113</td>
</tr>
<tr>
<td>Fire</td>
<td>:114</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:115</td>
</tr>
</table>
</div> -->
The problem is that in your HTML structure, you are listing the information for all countries in a single collective table, while displaying the flags for each country outside of the table. It's not very easy to 'break up' this information that's all stored in the table.
The best way to solve this is to handle both the flag and service information for each country at the same time. In order to do this, first we convert all of your table elements to <div>s, add classes to each of the new divs, and slightly change their order:
<div class="country">
<div class="media-left">
<a href="#">
<img class="media-object flagsize" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Flag_of_Brunei_1906-1959.svg/1000px-Flag_of_Brunei_1906-1959.svg.png" alt="...">
</a>
</div>
<div class="country-info">
<h4 class="media-heading country-title" ng-bind="service.country">Brunei</h4>
<div class="left" ng-bind="service.hl1">Service 1</div>
<div class="right" ng-bind="service.hl1num1">111</div>
<div class="left" ng-bind="service.hl2">Service 2</div>
<div class="right" ng-bind="service.hl1num2">222</div>
<div class="left" ng-bind="service.hl3">Service 2</div>
<div class="right" ng-bind="service.hl1num3">333</div>
</div>
</div>
Then you can target the respective contents much more easily :)
img.flagsize, .country-info {
max-width: 200px
}
.left {
float: left;
clear: left;
}
.right {
float: right;
clear: right;
}
You'll also need to specify that .country-info should be the same width as img.flagsize, or else the information will get pushed to the right of the page:
img.flagsize, .country-info {
max-width: 200px;
}
I've created a fiddle showcasing this here.
With this structure, you can change just about any aspect of the layout you'd like -- margins, padding, and heights no longer pose an issue ;)
Hope this helps! :)
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>"