Break table cells/td in html

Asked

Viewed 4,330 times

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. inserir a descrição da imagem aqui

<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>

html css table
  • 2

    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.

  • 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.

  • 3

    @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...

  • 1

    @mgibsonbr interesting. I’ll keep an eye here to see an example.

  • I agree with @Sergio, this problem the correct one would be to solve with Divs, besides being easier, it makes the code more elegant.

  • @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éfanifavaretopiovezan Sorry, I don’t understand. You commented on the right question and/or to the right person?

Show 2 more comments

1 answer

1

With tables you won’t get the expected, you should use the Divs and try with float:left and fixed size "simulate" a table with clear:Both to make your code. Another alternative to make it "semi-responsive" despite not being what you expect, is to set percentage to the width of your tds, so they will be proportional to the size of table q will be width=100%.

it would look, and its td: Or according to your need. For example: 10 columns vc can set 10% for each or 5% for 20 columns. or according to the size requirement of each.

I hope I’ve helped.

Browser other questions tagged html css table

You are not signed in. Login or sign up in order to post.