2
I have a dynamically generated page with php/sql, in it exists a tabela with dynamic data, the tabela is inside a div that limits and organizes the ends and size of the page. But it is not being displayed as it should, breaking the td for a new line below and not side by side as shown in a crude example below, I have exhausted my attempts, I do not know how to proceed further, so I ask for guidance on how to organize it.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="ISO-8859-1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!--CDN-->
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!--Bootstrap-editable-->
<link href="bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
<script src="bootstrap-editable/js/bootstrap-editable.js"></script>
<!--Bootstrap3-Dialog-->
<link rel="stylesheet" href="assets/bootstrap3-dialog/css/bootstrap-dialog.min.css">
<script src="assets/bootstrap3-dialog/js/bootstrap-dialog.min.js"></script>
<!--momentjs plugin for datetime etc-->
<script src="http://vitalets.github.io/x-editable/assets/momentjs/moment.min.js"></script>
<!-- Fix Bootstrap -->
<link rel="stylesheet" type="text/css" href="../assets/css/stylebox.css">
<!--<script src="assets/jquery/jquery-2.0.3.min.js"></script> -->
<!--Bootstrap-->
<!--<link href="assets/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet">-->
<!--<script src="assets/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>-->
<!--Bootstrap jQuery Validation Plugin-->
<script src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css" rel="stylesheet">
<style>
div.image {
border-radius: 5px;
position: relative;
height: 80px;
width: 80px;
padding: 3px;
float: left;
margin-bottom: 1px;
background: whitesmoke;
/*border-bottom: 2px groove rgb(27, 18, 236);*/
}
.header {
display: table-caption;
text-align: center;
margin-bottom: 10px;
padding: 5px;
text-decoration: none;
}
.header:hover {
background-color: rgb(221, 221, 238);
border-radius: 3px;
}
a:hover.header{
text-decoration: none;
}
a.header {
font-weight: bold;
//color: grey;
color: rgb(68, 67, 67);
}
a.header {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.7;
-webkit-transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-o-transition: opacity .55s ease-in-out;
-ms-transition: opacity .55s ease-in-out;
transition: opacity .55s ease-in-out;
-webkit-filter: grayscale(50%);
-moz-filter: grayscale(50%);
filter: grayscale(50%);
width: 90;
}
a.header:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1.0;
-webkit-transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-o-transition: opacity .55s ease-in-out;
-ms-transition: opacity .55s ease-in-out;
transition: opacity .55s ease-in-out;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
}
tr {
vertical-align: top;
}
span.stxt {
word-wrap: break-word;
}
td, th {
padding: 5px !important;
}
p.boxtable { os p -->
border-collapse:separate;
border: solid #ccc 1px;
border-radius: 15px;
}
p.boxtable
{
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
</style>
</head>
<div id="content">
<div class="entry-content">
<div class="entry-boxeditable" id="boxedit-0">
<p class="boxtable" style="background: rgba(200, 54, 54, 0.25);">
<table id="1" "><tbody><tr><th>Grupo 1 even</th></tr><tr>
<td><a class="header" href="url.php?p=6"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">outronome</span></a></td></tr></tbody></table></p><p class="boxtable" style="background: rgba(200, 54, 54, 0.25);"><table id="2" class="table "><tbody><tr><th>Grupo 2 odd</th></tr><tr>
<td><a class="header" href="url.php?p=404"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">Select another</span></a></td>
<td><a class="header" href="url.php?p=0"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">test</span></a></td>
<td><a class="header" href="url.php?p=0"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">test</span></a></td>
<td><a class="header" href="url.php?p=0"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">test</span></a></td>
<td><a class="header" href="url.php?p=0"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">test</span></a></td>
<td><a class="header" href="url.php?p=0"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">test</span></a></td>
<td><a class="header" href="url.php?p=0"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">test</span></a></td>
<td><a class="header" href="url.php?p=0"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">test</span></a></td>
<td><a class="header" href="url.php?p=0"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">test</span></a></td></tr><tr>
<td><a class="header" href="url.php?p=0"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">test</span></a></td>
<td><a class="header" href="url.php?p=0"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">test</span></a></td>
<td><a class="header" href="url.php?p=0"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">test</span></a></td></tr></tbody></table></p><p class="boxtable" style="background: rgba(200, 54, 54, 0.25);"><table id="3"><tbody><tr><th>Grupo test even</th></tr><tr>
<td><a class="header" href="url.php?p=1"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">Sample Codes</span></a></td>
<td><a class="header" href="url.php?p=4"><div style="content:url(); border: 2px solid red;" class="image"></div><span class="stxt">Normal #1</span></a></td></tr></tbody></table>
</p></div>
</div></div>
I think you should work it out with Divs instead of tables and try to break lines in half. If you put the code that generates this HTML we can help transform it.
– Sergio
So Sergio, after a lot of research, I found a possible solution, tomorrow I’ll update the code and see what happens. Actually the tables are messing everything up, because when the page is resized the problem would continue.
– Florida
@Sergio Although I agree, I recently saw myself with a similar problem: I have a table, even table (i.e. data arranged in tabular form), and I need it to look good in quite different resolutions. I almost asked here, by the way, but in the end I ended up looking for "Responsive table" and found various solutions, I just have to analyze them and choose a...
– mgibsonbr
@mgibsonbr interesting. I’ll keep an eye here to see an example.
– Sergio
I agree with @Sergio, this problem the correct one would be to solve with Divs, besides being easier, it makes the code more elegant.
– Diéfani Favareto Piovezan
@mgibsonbr the image you placed before does not open for me, take a look here https://jsfiddle.net/waow8am1/ wheel and see if this is it.
– Diéfani Favareto Piovezan
@Diéfanifavaretopiovezan Sorry, I don’t understand. You commented on the right question and/or to the right person?
– mgibsonbr