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.
Related
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
<div class="table-responsive">
<table class="table">
<thead>
Head
</thead>
<tbody>
<tr>
<td>
<div class="row">
<div class="col-lg-6">Item 1.0</div>
<div class="col-lg-6">Item 1.1</div>
</div>
</td>
<td>
<div class="row">
<div class="col-lg-6">Item 2.0</div>
<div class="col-lg-6">Item 2.1</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
This code creates a table where all items are in the same line. I have searched the css file but there is nowhere defined inline or inline-block, so I guess this is normal bootstrap behavior. What I am trying to achieve is to show items with prefix 1 one after another and same for items with prefix 2, but I want them all in same row. I have tried using <ul> with <li> elements, but they are also showed in the same line for some reason.
My table should contain only two columns and one header above them all. This is what I get now:
Issue is due to column classes - col-lg-6 which makes divs use equal width of parent td, use class col-lg-12 to use complete td width, please check the css of these classes below
.col-lg-12 {
width: 100%;
}
.col-lg-12 {
width: 50%;
}
Run below code
favorite
<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>
<div class="table-responsive">
<table class="table">
<thead>
Head
</thead>
<tbody>
<tr>
<td>
<div class="row">
<div class="col-lg-12">Item 1.0</div>
<div class="col-lg-12">Item 1.1</div>
</div>
</td>
<td>
<div class="row">
<div class="col-lg-12">Item 2.0</div>
<div class="col-lg-12">Item 2.1</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
codepen for reference - https://codepen.io/nagasai/pen/xybpMm
I don't understand yet why you need to use bootstrap grid system inside the table when the td's are designed to work like that. You're also using col-lg-6 which is equivalent to 2 td's inside 1 tr since there is no collapse (lg).
You'll have a similar output if you use this code;
<h6>Default:</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th colspan='2'>
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Item 1.0
</td>
<td>
Item 1.1
</td>
</tr>
<tr>
<td>
Item 2.0
</td>
<td>
Item 2.1
</td>
</tr>
</tbody>
</table>
</div>
<br>
<h6>Two Columns Only:</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th colspan='4'>
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Item 1.0
</td>
<td>
Item 1.1
</td>
<td>
Item 2.0
</td>
<td>
Item 2.1
</td>
</tr>
</tbody>
</table>
</div>
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>
I'm trying to make a table that has rows that could expand and collapse on the press of a button, like in Windows Explorer, pressing the "plus" next to the folder will open the files in the directory.
Here's what I wrote:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../asset/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="../asset/css/trax.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Test Results</h3>
</div>
<div class="table-responsive">
<table class="table table-condensed table-hover">
<thead>
<tr>
<th class="col-md-7 text-left">Name</th>
<th class="col-md-1 text-right">Success</th>
<th class="col-md-1 text-right">Total</th>
<th class="col-md-1 text-right">Fail</th>
<th class="col-md-2 text-center">Trend</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">
<button type="button" class="btn btn-default btn- xs" data-toggle="collapse" data-target=".module,.first">
+
</button>
Foo
</td>
<td class="text-right up"><span class="glyphicon glyphicon-arrow-up"></span>80%</td>
<td class="text-right">5</td>
<td class="text-right">1</td>
<td class="text-center"><span class="inlinesparkline" values="1,2,8,4,5,7,10"></span></td>
</tr>
<tr class="collapse out module first">
<td class="text-left col-md-7">Hi</td>
<td class="text-right up col-md-1"><span class="glyphicon glyphicon-arrow-up"></span>95%</td>
<td class="text-right col-md-1">5</td>
<td class="text-right col-md-1">1</td>
<td class="text-center col-md-2"><span class="inlinesparkline" values="1,2,3,4,5"></span></td>
</tr>
<tr>
<td class="text-left">Bar</td>
<td class="text-right down"><span class="glyphicon glyphicon-arrow-down"></span>60%</td>
<td class="text-right">5</td>
<td class="text-right">2</td>
<td class="text-center"><span class="inlinesparkline" values="10,5,7,12,6,4,2"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="../asset/js/jquery-2.1.1.min.js" type="text/javascript"> </script>
<script src="../asset/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../asset/js/jquery.sparkline.js" type="text/javascript"> </script>
<script src="../asset/js/app.js" type="text/javascript"></script>
</body>
</html>
So, I managed to get the button to show a new row but it isn't arranged properly: the table cells don't arrange according to the table header cells like in other rows.
But when the button is pressed, during the transition, it arranges itself right before adjusting back to the wrong spacing.
Adding col-md-(number) to the cells as classes doesn't fix it.
Please tell me how to fix it / where I am going wrong.
That is a funny one. I found a similar question with an answer that appears to work. I created a jsFiddle that shows it working. Basically it involves adding your own CSS class that overrides the bootstrap CSS and forces it to display as a table row.
table .collapse.in {
display: table-row !important;
}
I can't say I particularly like the solution, especially the use of !important, but it works. There is anohter solution in the question I linked you to which involved adding a <div> to the <tr> with a class of collapsible but I disliked the sound of that even more.
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>