Breaking cells / td from table in html

Question

Breaking cells / td from table in html

Navigation

#1 by (1 votes)

2

I have a dynamically generated page with php / sql , there is a tabela with dynamic data, tabela is within a div that limits and organizes page ends and size. But it is not being displayed as it should, breaking the td to a new line below and not side by side as shown in a coarse example below, I 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><!--FixBootstrap--><linkrel="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

asked by anonymous 02.04.2015 / 03:40

1 answer

OpenShift + Mentawai Problem Problem presenting text in php with editor tinymce

score 1 · Answer 1

With tables you will not get what you expected, you should use the divs and try with float: left and fixed size to "simulate" a table up to clear: both to make your code. Another alternative to make it "semi-responsive" even though it is not what you expect, you are setting a percentage to the width of your tds, in this way, they will be proportional to the size of the table that will be width = 100%. >

so it would look like: and your td: Or according to your need. For example: 10 columns you can set 10% for each or 5% for 20 columns. or according to the need of each size.

I hope I have helped.