changing row height/width in php

Question

Does anyone know how to change row height and width or even break to a new line in css/html?

I have some long sentences in a row and they overlap each other rather than going to a new line? This makes the text unreadable. Please see screenshot of the issue.

I've also tried to set min-width values to the <td> and <tr> page elements.

But no effect. I've also set the table to width-100%; but the table won't stretch all the way across the screen.

I want it to look like this...the sentence continues below:

enter image description here

Instead...it does this...

enter image description here As you can see , I can't even read the text in the table as the cells are pushing the text together. I want the cells to stretch to fit the text.

I've changed the width of one of the cells but the text still won't continue onto a different line. It just seems to be crammed in one cell.

css:

table {
        width: 100%;
        height: 30%;
        border: 1px solid #ffffff;
        border-spacing: 0;
        border-collapse: collapse;
        background-color: #ffffff;
}
tr:nth-child(even) {
    background: #ffffff;
   height:20%;
}


tfoot {
        background: #e9e9e9;
        font-weight: bold;
}
th {
        text-transform: uppercase;
        border-right: 1px solid #fff;
        background: #ffffff;
        border-bottom: 2px #fff solid;
        color:#fff;
}



td, caption {
        border-right: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
}
tr.even td {
        background: #ffffff;
}
th, td, caption {
        padding: 10px;
}
:before, :after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
}
.clearfix:before, .clearfix:after, .container:before, .container:after {
        display: table;
        content: " ";
}
.table-style2 th {
        border-right-color: #fff;
        border-bottom-color: #fff;
}

html:

    <table border='1'>
    <tr>
    <th>ID</th>
    <th>Title</th>
    <th>Description</th>
    <th>Location</th>
    <th>Category</th>
    </tr><tr><td style='height:10px; width:10px;'>1</td><td>example</td><td style='height:10px; width:100%;'>example text</td> <td>example city</td><td>example category</td> </tr>
<tr><td style='height:10px; width:10px;'>2</td><td>Banker</td><td style='height:10px; width:100%;'>Banking for clients</td> <td>Harrogate</td><td>banker</td> </tr>
<tr><td style='height:10px; width:10px;'>3</td><td>front end web developer</td><td style='height:10px; width:100%;'>front end web developer, create and maintain amazing websites.  html5, css3, javascript skills needed.</td> <td>York</td><td>IT</td> </tr>
<tr><td style='height:10px; width:10px;'>4</td><td>front end web developer</td><td style='height:10px; width:100%;'>front end web developer, create and maintain amazing websites.  html5, css3, javascript skills needed.</td> <td>harrogate</td><td>IT</td> </tr>
<tr><td style='height:10px; width:10px;'>5</td><td>Waiting Staff </td><td style='height:10px; width:100%;'>A history of table service is suitable but not essential as we provide thorough and comprehensive training on-site to provide our staff with the skills to excel. We’d like outgoing people motivated to wow our guests and who share our passion for outstanding service. Having been rated by our own staff in the Sunday Times 100 Best Companies surveys as one of the nation’s top hundred employers guarantees you that this will be a job like no other. We are currently the No.1 employer for having fu</td> <td>newcastle upon tyne</td><td>catering</td> </tr>
</table>

This should really be untagged from PHP as the problem is one of client rendering. — Pekka, Mar 16 '15 at 11:55
The table output is in php. I've got no issues with HTML tables. — Superunknown, Mar 16 '15 at 12:00
You indicate in your question that the problem is related to CSS. The fact that you use PHP to generate the HTML is incidental. Look for a solution in the presentation. Then, either a style or code change will resolve it. Try to reduce your question to a smaller sample that excludes the code to make it easier to determine the root cause. — Pekka, Mar 16 '15 at 12:01
The sample is small enough. I only have 5 columns in the table. I just want to extend the width of the columns. — Superunknown, Mar 16 '15 at 12:07
I meant a smaller code sample that excludes the bulk of the PHP to demonstrate the problem. Extending the width of the columns remains a client problem. Show a native HTML page that demonstrates the problem and work on the HTML styles. — Pekka, Mar 16 '15 at 12:10
I don't have a html page. the table output is in a php page. — Superunknown, Mar 16 '15 at 12:12
_“The table output is in php. I've got no issues with HTML tables.”_ – You _do_ have an issue with an HTML table. Whether the HTML code of that table was _generated_ by PHP, or typed in by your grandma, doesn’t make any difference whatsoever. And since no one here has your database content available, your PHP code doesn’t even allow us to easily reproduce the problem. So go _get_ the actual HTML code that your script outputs, and make that available as on online example somewhere if you want help. — CBroe, Mar 16 '15 at 12:49
I don't really know how to get a html output? I'm fairly new to php. I've edited the above and put in some html? Not sure if it's correct. — Superunknown, Mar 16 '15 at 12:54
@Superunknown are you sure nothing else is impacting on your code? by default CSS should wrap on word breaks so it looks like something else is adjusting default behaviour — Martin, Mar 16 '15 at 13:21
Hi I'm afraid nothing is working. I just want the table to accommodate the text, not the other way around. — Superunknown, Mar 16 '15 at 15:08

score 0 · Answer 1 · answered Mar 16 '15 at 11:31

0

Simply set a width to the elements containing the text and the sentences should break automatically.

answered Mar 16 '15 at 11:31

Promination

156
6

I've tried setting width to and No effect. – Superunknown Mar 16 '15 at 11:49
Try setting max-width – Promination Mar 16 '15 at 12:58
Doesn't work. The words overlap each other because the cell won't stretch. I want the cell to accommodate the words...height and width. – Superunknown Mar 16 '15 at 15:33

score 0 · Answer 2 · edited May 23 '17 at 10:24

CSS Solution:

word-break: break-all; in your CSS will force the line to break when it reaches the limit of its container. This looks like what you want.

PHP Solution:

Take the string you are going to output and cut it into a manageable size, the string which stretches your layout, let's call it $longString - you can cut down to a reasonable size and then display that:

if ($longString[42] !== false){
$shorterString = substring($longString,0,42);
$shorterString .= "...";
}
else {
$shorterString = $longString;
}

This will cut the long string down to shorter 42 characters with a ... appended at the end. See Get first n characters of a string . Also I used a true/false test on the 42nd element in the string, (the 43rd character) rather than getting a str_length() response because it is very slightly more efficient.

If the string is not 43 characters long the full string is outputted unaltered.

The PHP answer does not solve the fundamental CSS layout issues

score 0 · Answer 3 · answered Mar 16 '15 at 15:50

0

I've managed to set the width of one of the cells using

  echo "<td min-width:'700'>". $row["job_description"] . "</td> " ;

But the text still overlaps each other. The text will not continue onto the next line.

answered Mar 16 '15 at 15:50

Superunknown

501
2
10
30

changing row height/width in php

3 Answers3

CSS Solution:

PHP Solution: