HTML bootstrap dl-horizontal not working as expected - html

Though i have div class "dl-horizontal" inside the table, the dl-horizontal fields appear to be outside the table
Code which i used:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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>
</head>
<body>
<table class="table table-condensed table-striped">
<caption>Event <span class="badge">2</span></caption>
<dl class="dl-horizontal">
<dt>field-1</dt><dd>14</dd>
<dt>field-2</dt><dd>13</dd>
<dt>field-3</dt><dd>12</dd>
</dl>
<tr>
<th>Date</th>
<th>Field5</th>
<th>Field6</th>
<th>Field7</th>
<th>Field8</th>
<th>Field9</th>
</tr>
<tr>
<td class="text-nowrap">2018-11-13</td>
<td>val2</td>
<td>val2</td>
<td>val4</td>
<td>16</td>
<td>val5</td>
</tr>
</table>
</body>
</html>
What am i missing in this? I am trying to get "dl-horizontal" fields inside EVENT and above table values. any help is greatly appreciated. i tried table inside a the table but that doesnt seem to work.


This it the correct approach:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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>
</head>
<body>
<table class="table table-condensed table-striped">
<caption>Event <span class="badge">2</span></caption>
<tr><td colspan="6">
<dl class="dl-horizontal">
<dt>field-1</dt><dd>14</dd>
<dt>field-2</dt><dd>13</dd>
<dt>field-3</dt><dd>12</dd>
</dl>
</td></tr>
<tr>
<th>Date</th>
<th>Field5</th>
<th>Field6</th>
<th>Field7</th>
<th>Field8</th>
<th>Field9</th>
</tr>
<tr>
<td class="text-nowrap">2018-11-13</td>
<td>val2</td>
<td>val2</td>
<td>val4</td>
<td>16</td>
<td>val5</td>
</tr>
</table>
</body>
</html>


I think that you need to place your description list with a table element for it to be included as part of the table. This snippet places it within the caption tag:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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>
</head>
<body>
<table class="table table-condensed table-striped">
<caption>Event <span class="badge">2</span>
<dl class="dl-horizontal">
<dt>field-1</dt>
<dd>14</dd>
<dt>field-2</dt>
<dd>13</dd>
<dt>field-3</dt>
<dd>12</dd>
</dl>
</caption>
<tr>
<th>Date</th>
<th>Field5</th>
<th>Field6</th>
<th>Field7</th>
<th>Field8</th>
<th>Field9</th>
</tr>
<tr>
<td class="text-nowrap">2018-11-13</td>
<td>val2</td>
<td>val2</td>
<td>val4</td>
<td>16</td>
<td>val5</td>
</tr>
</table>
<hr>
<table class="table table-condensed table-striped">
<caption>Event <span class="badge">2</span>
</caption>
<tr>
<td colspan="6">
<dl class="dl-horizontal">
<dt>field-1</dt>
<dd>14</dd>
<dt>field-2</dt>
<dd>13</dd>
<dt>field-3</dt>
<dd>12</dd>
</dl>
</td>
</tr>
<tr>
<th>Date</th>
<th>Field5</th>
<th>Field6</th>
<th>Field7</th>
<th>Field8</th>
<th>Field9</th>
</tr>
<tr>
<td class="text-nowrap">2018-11-13</td>
<td>val2</td>
<td>val2</td>
<td>val4</td>
<td>16</td>
<td>val5</td>
</tr>
</table>
</body>
</html>

Related

Table is displayed with header at the bottom

I have made a simple HTML page, using Visual Studio Code, that should display a table:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<table>
<tr>
<th>Height</th>
<th>Weight</th>
</tr>
<tr>
<dt>180 cm</dt>
<dt>70 kg</dt>
</tr>
<tr>
<dt>182 cm</dt>
<dt>75 kg</dt>
</tr>
</table>
</body>
</html>
But when I run the page using Live Server, I get the following display.
180 cm
70 kg
182 cm
75 kg
Height Weight
As you can see, the headers are at the bottom instead of the top, and the rows of the body of the table do not form columns. Please your advice.

You are writing the Table data (td) tag wrong. It should be td not dt.
<table>
<tr>
<th>Height</th>
<th>Weight</th>
</tr>
<tr>
<td>180 cm</td>
<td>70 kg</td>
</tr>
<tr>
<td>182 cm</td>
<td>75 kg</td>
</tr>
</table>

Try this instead:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Height</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>180 cm</td>
<td>70 kg</td>
</tr>
<tr>
<td>182 cm</td>
<td>75 kg</td>
</tr>
</tbody>
</table>
</body>
</html>
you don't used <thead> & <tbody>, which is the main block of table.
<thead> is for header of table, the columns' that show title of row.
<tbody> is for body of table, the place that your row added into it.
also you spell <td> wrong (dt)

Display lines instead of empty cells in html table

I need to display something like the following picture in the empty cells of an html table (I'm using Bootstrap 4.3.1)
Source code:
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table table-bordered">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>
Expected result:
Thank you in advance.

Use a gradient background combined with :empty
td:empty {
background:repeating-linear-gradient(-45deg, transparent 0 3px,#000 0 6px);
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table table-bordered">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>
An SVG if you want better rendering.
td:empty {
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 2 3"><line x1="0" y1="5" x2="4" y2="-1" stroke="black"></line><line x1="2" y1="5" x2="6" y2="-1" stroke="black"></line></svg>') 0 0/8px 12px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table table-bordered">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>

you can use :empty
td:empty{
background:red;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table table-bordered">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Lois</td>
</tr>
</table>
</body>
</html>

Html table td width by vertical text?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<table height="200" class="table table-bordered table-striped table-highlight" >
<tbody>
<tr height="20">
<td rowspan="3" width="4%" style="vertical-align: middle;"><p style="transform: rotate(270deg);white-space: nowrap;">1.I have here some long title</p></td>
<td colspan="6" rowspan="3" width="384" >Here i have some text</td>
</tr>
<tr height="20">
</tr>
<tr height="20">
</tr>
</tbody>
</table>
</div>
</body>
</html>
The problem is that i want to have an vertical text and i used transform: rotate(270deg) but it makes the width of <td> not functionable. I wan to have an small one. Like:
Look here i have a picture

Use writing-mode and then rotate the text 180degrees.
The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
MDN
p {
white-space: nowrap;
writing-mode: vertical-lr;
transform: rotate(180deg);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<table height="200" class="table table-bordered table-striped table-highlight">
<tbody>
<tr height="20">
<td rowspan="3">
<p>1.I have here some long title</p>
</td>
<td colspan="6" rowspan="3" width="384">Here i have some text</td>
</tr>
<tr height="20">
</tr>
<tr height="20">
</tr>
</tbody>
</table>
</div>

p {
word-break: break-all;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<table height="200" class="table table-bordered table-striped table-highlight" >
<tbody>
<tr height="20">
<td rowspan="3" width="4%" style="vertical-align: middle;padding: 2rem;"><p>1.I have here some long title</p></td>
<td colspan="6" rowspan="3" width="384" >Here i have some text</td>
</tr>
<tr height="20">
</tr>
<tr height="20">
</tr>
</tbody>
</table>
</div>
</body>
</html>

//screenshot is given below
1.I have here some long title.
Here i have some textHere i have some text
<tr>
<td style="vertical-align: middle;" rowspan="3" >
<p style="transform: rotate(270deg);"><span style="word-wrap: break-word; white-space: nowrap; color: red;">1.I have here some long title</span></p>
</td>
<td colspan="6" rowspan="3" width="384"><p style="max-width:40px;">Here i have some text. Here I have some text</p></td>
</tr>
<tr>
<td style="vertical-align: middle;" rowspan="3">
<p style="transform: rotate(270deg);"><span style="word-wrap: break-word; white-space: nowrap; color: red;">1.I have here some long title</span></p>
</td>
<td colspan="6" rowspan="3" width="384"><p style="max-width:40px;">Here i have some text. Here I have some text</p></td>
</tr>
</tbody>
</table>`enter code here`
</div>[![screenshot below][1]][1]
[1]: https://i.stack.imgur.com/6lfdT.png

How to position button to bottomright of table when width is auto?

I have included my plunker link here https://plnkr.co/edit/TD6iQJvIExwTeJ9QPbRS?p=preview
I want the submit button to appear at the right bottom of the table.My table width changes according to the data. My table's width is auto. So how will i position the button to right bottom everytime.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" style="width:auto;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
<div class="col-sm-1">
<button class="btn btn-success pull-right">SUBMIT</button>
</div>
</div>
</body>
</html>

You can try this code.
When trying remove last tr from tbody and check the width and button position.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" style="width:auto;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July jan</td>
<td>Dooley Hello</td>
<td>julyjan12345678#example.com</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right"><button class="btn btn-success pull-right">SUBMIT</button></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>

Change the Grid class to col-sm-12 and make the width of the table to 100%.
Added the Preview,
https://plnkr.co/edit/M3p2bpj460niGCu59irR?p=preview

rowspan in bootstrap table class

I am using bootstrap3 for my table.
I need Login button in to be last column of the table.
I really need it to be in bootstrap only.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
<tr>
<td rowspan='3'><button class="btn btn-primary">Login</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I tried but couldn't solve it.
Please help me.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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">
<style>
.table > tbody > tr > td {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
<td rowspan='3'><button class="btn btn-primary align-middle">Login</button></td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Might be you want this. If it is not, please elaborate where you exactly want the button.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
<td><button class="btn btn-primary">Login</button> </td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
<td><td>
</tr>
</tbody>
</table>
</div>

try this code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td><button class="btn btn-primary">Login</button></td>
</tr>
</tbody>
</table>
</div>