Geek asks and answers

How to overwrite table attribute now now

In IE8 it works fine. In firefox, if I remove the nowrap attribute from the td text, the result is wrapped properly, but without deleting the nowrap text, the text is not wrapped.

Is there a way to rewrite the nowrap attribute via css in firefox.

<div style="width:100%;border:1px solid #eaeaea">
<table style="width:100%;word-wrap:break-word;table-layout:fixed" border="1" >
    <tr>
        <td>
            thisssssssssssssssssssssssssss
        </td>
        <td nowrap="" style="word-wrap:break-word;">
            22222222thisssssssssssssssssssssssssss22222222thisssssssssssssssssssssssssss22222222thisssssssssssssssssssssssssss
        </td>
    </tr>
</table>
</div>
+3
source share
3 answers
table {
  table-layout:fixed;
  width:100%;
  word-wrap:break-word;
}

td {
 white-space: normal;
}

white space rule overrides no-wrap attribute (your question), word-wrap rule breaks indestructible lines

+13
source

A quick thought ... before you start rewriting FF. See what Chrome / Safari, etc. does, and consider rewriting this CSS with the IE 8 condition (most rules approach).

<!--[if IF 8]>...

0
source

, , - :

<style type="text/css">
    #myDiv { width:100%; border:1px solid #eaeaea; }

    #myTable { width:100%; word-wrap:break-word; table-layout:fixed }
    #myTable th, #myTable td { border:1px solid #000000; }

    td.breakWord { word-wrap:break-word; white-space:nowrap; }
</style>


<!--[if IE]>
<style type="text/css">
    td.breakWord { white-space:normal; }
</style>
<![endif]-->


<div id="myDiv">
<table id="myTable" >
    <tr>
        <td>
            thisssssssssssssssssssssssssss
        </td>
        <td class="breakWord">
            2222222thisssssssssssssssssssssssssss22222222thisssssssssssssssssssssssssss22222222thisssssssssssssssssssssssssss
        </td>
    </tr>
</table>
</div>

http://www.quirksmode.org/css/condcom.html

0

More articles:


All Articles