JElison JElison - 24 days ago 6
Android Question

Android WebView <td> content overflows <td> borders

I am using a webview widget to display some data in my application. I construct the content of the webview like so:

StringBuffer results = new StringBuffer();
results.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
results.append("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
results.append("<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\">");
results.append("<head></head><body><table border=\"1\">");
results.append("<tr><td>" + label1 + "</td><td>" + value1 + "</td></tr>");
results.append("<tr><td>" + label2 + "</td><td>" + value2 + "</td></tr>");
results.append("<tr><td>" + label3 + "</td><td>" + value3 + "</td></tr>");
results.append("<tr><td>" + label4 + "</td><td>" + value4 + "</td></tr>");
results.append("</table></body></html>");


The layout of the webview is defined like so:

<WebView
android:id="@+id/webViewResults"
android:layout_width="fill_parent"
android:layout_height="140dp"
android:layout_below="@id/buttonSearch"
android:fadeScrollbars="false"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"/>


The problem is, the fourth row contains a long element and goes beyond the border of the td element, but interestingly, not beyond the border of the table. It looks like this:

Screenshot

I have tried various css options to extend the length of the rows and elements but, the result is always the same. What am I doing wrong?

Answer

After continuing to experiment, I have found a solution. I added the following css elements:

table {border:1px solid black;}
td {white-space:nowrap; border:1px solid black}

And I removed the border="1" attribute from the table tag.