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>
Related
enter image description here
I want to create an HTML irregular table like this.
enter image description here
but I don't know what's wrong with my code
<html>
<head>
<title>Test 2</title>
</head>
<body>
<table border="1" width="500px" height="100px">
<tr>
<td>Zoology</td>
<td rowspan="3">Welcome</td>
<td>Maths</td>
</tr>
<tr>
<td>Batany</td>
<td rowspan="3">Physics</td>
</tr>
<tr>
<td rowspan="2">Entomology</td>
</tr>
<tr>
<td rowspan="2">Heading</td>
</tr>
<tr>
<td>Toxicology</td>
<td>Computer</td>
</tr>
</table>
</body>
</html>
Please help!
<html>
<head>
<title>Test 2</title>
<style>
table, tr, td
{
border-collapse: collapse;
border: 2px solid black;
padding: 5px;
}
tr
{
height: 30px;
}
</style>
</head>
<body>
<table border="1" width="500px" height="100px">
<tr>
<td>Zoology</td>
<td rowspan="3">Welcome</td>
<td>Maths</td>
</tr>
<tr>
<td>Batany</td>
<td rowspan="3">Physics</td>
</tr>
<tr>
<td rowspan="2">Entomology</td>
</tr>
<tr>
<td rowspan="2">Heading</td>
</tr>
<tr>
<td>Toxicology</td>
<td>Computer</td>
</tr>
</table>
</body>
</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>
<!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
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
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>