I'm trying to set td width to diffrent px on each row.
So i generate a table tag with HTML.
Then i loop out a table with PHP.
If i put all td´s in one tr it works, but i got all td on same row.
I'd like to have just one td on each tr.
What i'm doing is building rectangles with diffrent length in a list.
Later on, they will be draggable.
Code
echo "<tr><td class='tdElements' id='".$row['id']."' style='width:".$row['element_langd']."px' draggable='true' ondragstart='drag(event)'>".$row['element_langd']."</td></tr>";
Try:
echo
"<div id='".$row['id']."' style='width:".$row['element_langd']."px'
draggable='true' ondragstart='drag(event)'>"
.$row['element_langd'].
"</div>";
You can explicitly define the width of an individual <div> using css and, so each rectangle should be sized according to the $row['element_langd'] value.
Related
I build a table using Ajax/PHP/MySql. In the table one column is for comments, sometimes the comments are quite long but I don't want to show all of them because it distorts the table look so I set it up like this;
echo ("<td id=\"comments:$row[recordID]\">
<div class='scrollable'> $row[comments] </div> </td>");
And the CSS is;
div.scrollable {
width: 100%;
height: 75px;
margin: 0;
overflow: auto;
}
The problem is the height of the cell is locked at 75px because of the div on the CSS, but if the cell is empty I want it set to its default, not that imposed by the div.scrollable CSS.
I tried using 'inherit' for the height, but that of course cancels out the overflow and defaults the height to show everything in the cell.
What do I have to do to get an empty cell to have the same height as the other columns in the table, but not make all the other cells in the row its height?
Simply set the class if the comment is empty.
$class = empty($row[comments]) ? 'nonscrollable' : 'scrollable' ;
echo ("<td id=\"comments:$row[recordID]\">
<div class='$class'>$row[comments]</div> </td>");
I am showing 5 results on a html page using divs and absolute position. I have used display:table-cell; and display:flex; for center positioning of image and text.
What i have problem is with for some reason after creating a parent div for each result, giving it a border, for some reason eben though i use absolute position there seems to be some uniform space between results. I see the borders in the right place, but the result contents are shown out of place.
See here:
https://www.dropbox.com/s/deeycdr32ejcftd/proferror.jpg?dl=0
Something is spacing out the results wringly. When I take out the parent container labelled profile[1 to 6] then it does work.
heres the php which is echoing the HTML:
echo "<div id='results' style='position:absolute;left:0px;top:0px;'>"
(while loop)
echo "<div id='profile".$profileid."' style='border-style: solid;position:absolute;left:0px;top:".$yy."px;width:320px;height:50px;'>";
echo "<div id='pic".$profileid."' style='display:table-cell; vertical-align:middle; text-align:center;background-color: #434345;position:absolute;left:0px;top:".$yy."px;width:50px;height:50px;overflow: hidden;'>";
echo "<a href='http://rafnet.co.uk/click/php/requests.php?from=".$username."&to=".$row["username"]."'><img style='max-height: 100%;' src='http://rafnet.co.uk/click/images/".$row["image"]."' /></a></div>";
echo "<div style='color:#0d00ff;display:flex; align-items: center; justify-content: center;position:absolute;left:50px;top:".$yy."px;width:270px;height:30px;overflow: hidden;'>".$name."</div>";
echo "<div style='display:table-cell; vertical-align:middle; text-align:center;position:absolute;left:50px;top:".($yy+30)."px;width:270px;height:20px;overflow: hidden;'>".$info."</div></div>";
$yy+=60;$profileid+=1;
(end of while loop)
echo "</div>"
echo "<div style='display:table-cell; vertical-align:middle; text-align:center;position:absolute;left:50px;top:".($yy+30)."px;width:270px;height:20px;overflow: hidden;'>".$info."</div></div>";
Try taking away the second </div> at the end of this line
I managed to fix this issue. What I realised after some work was that all the divs inside the parent div "profile" were being positioned relative to its position.
so for those divs i changed
top:".$yy."px;
to
top:0px;
ref to css are you saying i shoudlnt use the style attribute to define things? Are you saying i should place the css in the head section and assign them using the id or class? I just using the style attribute as i can see without referencing to what element it applies to
I need to generate a table (HTML/CSS) with 4 cells inside (think 4 boxes one on top of another).
I have two questions-
How can i fix the width and height of each box (they may all have different heights) without no scroll bars if text overflows. If text does overflow, the cell height (& width) must stay same size and hide any overflowing text.
Using PHP (No frameworks) I populate these 4 cells with 4 different strings in a database. How can I assign
the text to each one of the 4 cells? e.g. $string[1] does into cell#1, $string[2] goes into cell#2 etc.
Thankyou.
Here is HTML/PHP that generates the table (in a calandar)
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000"> '
<tr>'
<td><table width="100%" border="0" cellpadding="0" cellspacing="1">'
for ($i = 1; $i <= $days_in_month; $i++) {'
echo "<td width=\"100\" height=\"100\" class=\"$class\">\n";
echo "<div align=\"right\"><span class=\"daynumber\">$i</span></div>\n";'
// keep count of cells across row, and if=7 end the row and start again '
}'
etc. (My calendar code works well, unlike my futile attempts to format my code here)
I store "events" in a mySql db, and when i=date in db, I output the text. The complex bit is trying to put 4 different event "data" into their corresponding boxes (see Q2 above).
to fix the width and height and to stop overflowing you can use css class.
.something{
width: 200px;
height : 100px;
overflow : hidden;
}
and also you can limit the text length using php substr() function
$limitedText = substr($yourstring, 0, 100);
to do this you have to use a foreach or while loop
foreach($queryResult as $rs){
echo "$rs['stringOne']";
echo "$rs['stringTwo']";
echo "$rs['stringThree']";
echo "$rs['stringFour']";
}
I have a very weird issue with table cell.
My previous post
How to append element to another element using php
My code is like the following
$dom = new DomDocument();
$dom->loadHTML($html]);
$tbodies = $dom->getElementsByTagName('tbody');
foreach ($tbodies as $tbody) {
$table = $dom->createElement('table');
$table->setAttribute('width',500);
$table->setAttribute('style','border:2px solid #8C8C8C;text-align:center;table-layout:fixed; border-collapse:separate;');
$tbody->parentNode->replaceChild($table, $tbody);
$table->appendChild($tbody);
}
$returnText .=$dom->saveHTML();
From my previous pose, I got my answer but it seems like the new html table doesn't have border in the table cell.
So my table like
___________
|cell cell |
|cell cell |
|___________|
but I want every cell has border.
I am sure my original html table cell has no inline style addressing cell border too.
Can anyone helps?
Thanks!
There is no border on the cells because in css the table tag is styled separately from the cells td or th tag. See here: http://www.quackit.com/html/codes/tables/html_table_border.cfm
edit: Better link.
I have never used domdocument but i see this line :
$table->setAttribute('style','border:2px solid #8C8C8C;text-align:center;table-layout:fixed; border-collapse:separate;');
Instead of adding style attribute that will stylish your table and not td cells , try to add a class for your table that will stylish both table and cells :
$table->setAttribute('class','test');
and add a css file or a style that containts your class :
<style type='text/css'>
.test{
border:2px solid #8C8C8C;
text-align:center;
table-layout:fixed;
border-collapse:separate;
}
.test th,.test td{border:2px solid #8C8C8C;}
</style>
I'm trying to create an unordered list of <a>text1 text2 text3</a> elements, with a while loop. This list is then styled using #sidebar li a in my CSS.
My problem is that the text1, text2, text3 that is passed into each <a> element in my while loop can take on different lengths and I would like for them to be spaced equally like a table. However, I CANNOT use a table, because to format like a table, requires me to do this....
<li><a><tr><td>text1</td> <td>text2</td> <td>text3</td></tr></a></li>...
and because of that, my CSS "background" image will repeat for EACH <td>, when I only want the background image ONCE for each <tr>...(using different style tags than shown below)
Is there a way to change my while loop to space my text1,text2,text3 evenly like a table (without using a table) and maintain my CSS background image ONCE per each <li>? Any help would be INCREDIBLY appreciated!
My PHP file
while($row = mysql_fetch_assoc($result))
{
echo "<ul id=\"sidebar\">";
echo "<li>" . $row['column1'] . " ". $row['column2']. " ". $row['column 3']."</li></ul>";
}
My CSS file
#sidebar li a {
background: url(../images/sidebar.gif) no-repeat 0px 0px;
}
while($row = mysql_fetch_assoc($result))
{
echo "<ul id=\"sidebar\">;
echo "<li><span class="psuedo-col">" . $row['column1'] . "</span> <span class="psuedo-col">". $row['column2']. "</span> <span class="psuedo-col">". $row['column 3']."</span></li></ul>";
}
Add <span>s around the content from the $row['...'], in order that the css has something to serve as a hook, and set an explicit width on those spans. Bearing in mind that if the content of the spans is too large it will either require an overflow rule (hidden, visible or auto) or your content will start to look odd.
As an example
span.psuedo-col {
display: inline-block;
width: 10em;
overflow: hidden;
}
Or you could use
`display: block;
/* other stuff */
float: left; /* or right, depending on your alignment requirements */
The floats, obviously, will take the contents of the spans out of the flow of the document, perhaps causing the <li> itself to collapse, sine it'll have no content.
Asfar as I understand your question, you want your LI elements to have a fixed width like TD in a table:
#sidebar li {
float:left;
width:33%; /* three columns with equal width */
}