How can I reduce the space between the parallel tables for the below code? The look and feel looks a bit odd where the data grid tables are placed at the extreme ends of the page alignment.
Can anyone suggest how can I manage the alignment for the tables to reduce the space of the tables placed at each of the extreme ends left hand and right hand side?
Note: Copy the code in a notepad and save it as test.html extension and open in IE or Firefox to check the alignment problem I have discussed above.
Here is the code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Server status</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body><br/><br/><br/><br/>
<div style="float:right;"><table id="ll" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:bottom;"><table id="gg" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div><br/><br/><br/>
<div style="float:left;"><table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:right;"><table id="vv" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name3" width="80">Status</th></tr>
</thead>
<tbody>
<tr><td>India</td></tr>
<tr><td>China</td></tr>
<tr><td>Oz</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Please Replace your code by below code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Server status</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body><br/><br/><br/><br/>
<div style="width:780px; overflow:hidden; margin:0 auto; margin-bottom:20px;">
<div style="float:right;">
<table id="ll" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:left;">
<table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
</div>
<div style="width:780px; overflow:hidden; margin:0 auto; ">
<div style="float:left;">
<table id="gg" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:right;">
<table id="vv" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name3" width="80">Status</th></tr>
</thead>
<tbody>
<tr><td>India</td></tr>
<tr><td>China</td></tr>
<tr><td>Oz</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Related
I'm trying to style all tbody tags except the first one but with poor results.
As you can see in the snippet, the style is applied to all elements, including the first one, where am I wrong?
div.cont_table_toggle table#general_list tbody.divider:not(:first-child) {
border-top: 8px solid red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont_table_toggle">
<table id="general_list" class="table table-bordered">
<thead>
<tr>
<th>AAAA</th>
<th>BBBB</th>
</tr>
</thead>
<tbody id="block-1" class="divider">
<tr>
<td>1111</td><td>2222</td>
</tr>
</tbody>
<tbody id="block-2" class="divider">
<tr>
<td>3333</td><td>4444</td>
</tr>
</tbody>
<tbody id="block-3" class="divider">
<tr>
<td>5555</td><td>6666</td>
</tr>
</tbody>
</table>
</div>
Try using tbody.divider:not(:first-of-type).
The :first-of-type selector matches every element that is the first child, of a particular type, of its parent.
Reference : https://www.w3schools.com/cssref/sel_first-of-type.asp
https://www.w3schools.com/cssref/css_selectors.asp
Try it below.
div.cont_table_toggle table#general_list tbody.divider:not(:first-of-type) {
border-top: 8px solid red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont_table_toggle">
<table id="general_list" class="table table-bordered">
<thead>
<tr>
<th>AAAA</th>
<th>BBBB</th>
</tr>
</thead>
<tbody id="block-1" class="divider">
<tr>
<td>1111</td><td>2222</td>
</tr>
</tbody>
<tbody id="block-2" class="divider">
<tr>
<td>3333</td><td>4444</td>
</tr>
</tbody>
<tbody id="block-3" class="divider">
<tr>
<td>5555</td><td>6666</td>
</tr>
</tbody>
</table>
</div>
tbody is not the first child of the table. So the :first-child selector does not work. If you remove the thead, it works.
div.cont_table_toggle table#general_list tbody.divider:not(:first-child) {
border-top: 8px solid red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont_table_toggle">
<table id="general_list" class="table table-bordered">
<tbody id="block-1" class="divider">
<tr>
<td>1111</td><td>2222</td>
</tr>
</tbody>
<tbody id="block-2" class="divider">
<tr>
<td>3333</td><td>4444</td>
</tr>
</tbody>
<tbody id="block-3" class="divider">
<tr>
<td>5555</td><td>6666</td>
</tr>
</tbody>
</table>
</div>
You could use :not(#block-1), :nth-child(2), or as the other answer has suggested, :not(:first-of-type).
Use not(#block-1)
The first tbody has id that you can use. As you many know, id must unique.
tbody:not(#block-1) selects all tbodys except the first one.
#general_list tbody:not(#block-1) {
border-top: 8px solid red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont_table_toggle">
<table id="general_list" class="table table-bordered">
<thead>
<tr>
<th>AAAA</th>
<th>BBBB</th>
</tr>
</thead>
<tbody id="block-1" class="divider">
<tr>
<td>1111</td><td>2222</td>
</tr>
</tbody>
<tbody id="block-2" class="divider">
<tr>
<td>3333</td><td>4444</td>
</tr>
</tbody>
<tbody id="block-3" class="divider">
<tr>
<td>5555</td><td>6666</td>
</tr>
</tbody>
</table>
</div>
Use :not(:nth-child(2))
#general_list tbody:not(:nth-child(2)) {
border-top: 8px solid red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont_table_toggle">
<table id="general_list" class="table table-bordered">
<thead>
<tr>
<th>AAAA</th>
<th>BBBB</th>
</tr>
</thead>
<tbody id="block-1" class="divider">
<tr>
<td>1111</td><td>2222</td>
</tr>
</tbody>
<tbody id="block-2" class="divider">
<tr>
<td>3333</td><td>4444</td>
</tr>
</tbody>
<tbody id="block-3" class="divider">
<tr>
<td>5555</td><td>6666</td>
</tr>
</table>
</div>
How to fit table on mobile view?
I want:
But it is as:
My codes:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2>Text:</h2>
<table class="table table-bordered table-dark">
<tbody>
<tr>
<td>Name</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text text text text text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
SelectGo Ahead
</div>
How to fit table on mobile view?
The result for the above codes is not readable properly, we have to zoom it!
You can change from <div class="container"> to <div class="container-fluid">
And add meta viewport for your page.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Here is result with container-fluid
If you don't want to use container-fluid, you can setup in media query max width 767px, remove max-width values and set margin to 0 for container class
I have this table and i want add that (the one inside the black squear) to the future web, but i only manage do a table, this is the entire code
<!DOCUMENTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Asuntos Pendientes</title>
<link rel="stylesheet" type="text/css" href="index_style.css">
</head>
<body>
<div class="main-body">
<div class="body-data">
<div class="tabla">
<table>
<tr>
<th>ID</th>
<th>Fecha</th>
<th>Servicio</th>
<th>Asunto</th>
<th>Fecha a Controlar</th>
<th>Fecha de Resolucion</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="input-data">
<label>ID</label><input id="ID" type="text"><br>
<label>Fecha</label><input id="fecha" type="date"><br>
<label>Servicio</label><input id="servicio" type="text"><br>
<label>Fecha a Controlar</label><input id="fechaControlar" type="date"><br>
<label>Fecha de Resolucion</label><input id="fechaResolucion" type="date"><br>
<label>Asunto</label><textarea id="asunto" placeholder="Asunto"></textarea><br>
<label>Detalle</label><textarea id="detalle" placeholder="Detalle"></textarea><br>
</div>
</div>
<div class="col-botones">
Cerrar Formulario
</div>
</div>
</body>
</html>
can be done in other way? because i need a table who expands when i insert or delete data.
I'm sure this is just something stupid, but I've copied the table header formatting example from bootstraps website here but it isn't actually changing the table header color. What am I doing wrong?
Running the code snippet shows the behavior I am describing when I want it to look like:
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="container">
<table class="table table-hover table-striped">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I'm trying to add jquery data tables to a simple aspx page. Did this before a couple times but this website that I'm adding it to now has some CSS that is getting inherited.
So I took the generated HTML and removed the CSS that was getting added to it.
My page still does not style properly!
Here is my HTML.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.dataTables.min.js"></script>
<link href="CSS/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<link href="CSS/demo_page.css" rel="stylesheet" />
<link href="CSS/demo_table.css" rel="stylesheet" />
<link href="CSS/demo_table_jui.css" rel="stylesheet" />
<link href="CSS/jquery.dataTables.css" rel="stylesheet" />
<link href="CSS/jquery.dataTables_themeroller.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$("#gvMain").prepend($("<thead></thead>").append($(this).find("tr:first"))).
dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
});
</script>
<div>
<form>
<table id="gvMain">
<tr>
<th scope="col">Some Id</th>
</tr>
<tr class="gridItem">
<td>297</td>
</tr>
<tr class="gridAlternatingItem">
<td>296</td>
</tr>
<tr class="gridItem">
<td>295</td>
</tr>
<tr class="gridAlternatingItem">
<td>295</td>
</tr>
<tr class="gridItem">
<td>294</td>
</tr>
<tr class="gridAlternatingItem">
<td>294</td>
</tr>
<tr class="gridItem">
<td>293</td>
</tr>
<tr class="gridAlternatingItem">
<td>293</td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
It looks like below
I have spent hours trying to get it to work but no luck. It is in the main directory of the existing site though. But that should not matter right coz the HTML does not have anything included in it.
This is the screenshot of four errors that are showing in the above screenshot. It is nothing but some missing images/css files.
You have to add the <thead> and <tbody> tag
Here is example of table:
<table id="gvMain">
<thead>
<tr>
<th scope="col">Some Id</th>
</tr>
</thead>
<tbody>
<tr class="gridItem">
<td>297</td>
</tr>
<tr class="gridAlternatingItem">
<td>296</td>
</tr>
<tr class="gridItem">
<td>295</td>
</tr>
<tr class="gridAlternatingItem">
<td>295</td>
</tr>
<tr class="gridItem">
<td>294</td>
</tr>
<tr class="gridAlternatingItem">
<td>294</td>
</tr>
<tr class="gridItem">
<td>293</td>
</tr>
<tr class="gridAlternatingItem">
<td>293</td>
</tr>
</tbody>
</table>