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>
Related
I would like the lines to be much closer to each other, but margin and height are not working
<h4>TITLE:</h4>
<div style="width: 290px; display: table-cell;">
<h4>AAA</h4>
</div>
<div style="display: table-cell;">
<h4>€ 123</h4>
</div>
<br>
<div style="width: 290px; display: table-cell;">
<h4>BBB</h4>
</div>
<div style="display: table-cell;">
<h4>€ 123</h4>
</div>
Result:
There is almost a full line size between AAA and BBB. That's the issue.
Use table
<table class="table table-striped" style="width:100%; table-layout:fixed">
<thead class="table-head">
<tr>
<th text-align="center" colspan="2"><h4>TITLE:</h4></th>
</tr>
</thead>
<tbody>
<tr class="table-success" text-align="center">
<td style="text-align:center;vertical-align:middle">AAA</td>
<td style="text-align:center;vertical-align:middle">€ 123</td>
</tr>
<tr text-align="center">
<td style="text-align:center;vertical-align:middle">BBB</td>
<td style="text-align:center;vertical-align:middle">€ 123</td>
</tr>
</tbody>
</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 make the picture to have a width on 100%, which means that the picture should fill out the white space, and align vertical with the text there is below.
My Example Site
The code is for email newsletters, therefore I am using foundation. I cannot find how I am doing that in the documentation, therefore I have to try something else.
How can I make the picture fill out the whitespace?
Relevant HTML code
<body>
<!-- Wrapper for the body of the email -->
<table class="body" data-made-with-foundation>
<tr>
<!-- The class, align, and <center> tag center the container -->
<td class="float-center" align="center" valign="top">
<center>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: blue;">
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tr>
<th>
<center data-parsed="">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" width="100%">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: red;">
<table align="center" class="container" >
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="background-color: yellow;">
<table>
<tr>
<th>Here is all my text is gonna be. Here is all my text is gonna be.Here is all my text is gonna be.Here is all my text is gonna be.</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: pink;">
<table align="center" class="container" >
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="background-color: green;">
<table>
<tr>
<th>Here is all my text is gonna be.</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
Well, you have to modify two things.
First of all:
Original code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
Final code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="padding:0;">
And second: Original code:
<center data-parsed="">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" width="100%">
</center>
Final code:
<center data-parsed="">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" style="width:100%;">
</center>
My best regards!
Sure!, try this:
Original code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="padding:0;">
Final code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="padding:0 !important;">
EDIT ** THIS WILL WORK **
Final version
Change the < img> to < div> with image background:
<th class="small-12 large-12 columns first last" style="padding: 0 !important;">
<table>
<tbody>
<tr>
<th>
<center>
<div style="background:blue url('http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg') no-repeat center; background-size:cover;" alt="image of clever meme that made me chuckle">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" style="display:hidden;">
</div>
</center>
</th>
</tr>
</tbody>
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>"
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"