Is there css that I can use to stop the text wrapping, it's ok to cut off some data as well-CodePudding

I have the table below where the columns are wrapping the data. Is there some css I can use to prevent it from doing that? I don't my if the data gets clipped either. Or what are some other options? I just want to keep all rows consistent and 1 line per row.

<html>
<head>
    <title></title>
    <style>
        table {
            border-spacing: 0px;
        }

        td {
            border: 1px solid #bbb;
            padding: 0.2em;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td>row1 col1 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col2 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col3 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col4 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col5 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col6 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col7 - The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td>row2 col1</td>
            <td>row2 col2</td>
            <td>row2 col3</td>
            <td>row2 col4</td>
            <td>row2 col5</td>
            <td>row2 col6</td>
            <td>row2 col7</td>
        </tr>
        <tr>
            <td>row3 col1</td>
            <td>row3 col2</td>
            <td>row3 col3</td>
            <td>row3 col4</td>
            <td>row3 col5</td>
            <td>row3 col6</td>
            <td>row3 col7</td>
        </tr>
        <tr>
            <td>row4 col1</td>
            <td>row4 col2</td>
            <td>row4 col3</td>
            <td>row4 col4</td>
            <td>row4 col5</td>
            <td>row4 col6</td>
            <td>row4 col7</td>
        </tr>
    </table>    
</body>
</html>

CodePudding user response：

You can replace the scroll by clip. Try this:

    table {
        border-spacing: 0px;
    }

    td {
        border: 1px solid #bbb;
        padding: 0.2em;
        white-space: nowrap;
        max-width: 170px !important;
        overflow-x: scroll;
    }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Counter</title>
  </head>

  <body>
   <table border="1">
     <tr>
        <td>row1 col1 - The quick brown fox jumps over the lazy dog</td>
        <td>row1 col2 - The quick brown fox jumps over the lazy dog</td>
        <td>row1 col3 - The quick brown fox jumps over the lazy dog</td>
        <td>row1 col4 - The quick brown fox jumps over the lazy dog</td>
        <td>row1 col5 - The quick brown fox jumps over the lazy dog</td>
        <td>row1 col6 - The quick brown fox jumps over the lazy dog</td>
        <td>row1 col7 - The quick brown fox jumps over the lazy dog</td>
    </tr>
    <tr>
        <td>row2 col1</td>
        <td>row2 col2</td>
        <td>row2 col3</td>
        <td>row2 col4</td>
        <td>row2 col5</td>
        <td>row2 col6</td>
        <td>row2 col7</td>
    </tr>
    <tr>
        <td>row3 col1</td>
        <td>row3 col2</td>
        <td>row3 col3</td>
        <td>row3 col4</td>
        <td>row3 col5</td>
        <td>row3 col6</td>
        <td>row3 col7</td>
    </tr>
    <tr>
        <td>row4 col1</td>
        <td>row4 col2</td>
        <td>row4 col3</td>
        <td>row4 col4</td>
        <td>row4 col5</td>
        <td>row4 col6</td>
        <td>row4 col7</td>
     </tr>
 </table>    

</body>
</html>

CodePudding user response：

td {
    white-space: nowrap;
}
.x{
overflow:hidden;
white-space: nowrap;
}

#y{
width:750px;
table-layout:fixed;
}

<html>
<head>
    <title></title>
    <style>
        table {
            border-spacing: 0px;
        }

        td {
            border: 1px solid #bbb;
            padding: 0.2em;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td>row1 col1 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col2 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col3 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col4 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col5 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col6 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col7 - The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td>row2 col1</td>
            <td>row2 col2</td>
            <td>row2 col3</td>
            <td>row2 col4</td>
            <td>row2 col5</td>
            <td>row2 col6</td>
            <td>row2 col7</td>
        </tr>
        <tr>
            <td>row3 col1</td>
            <td>row3 col2</td>
            <td>row3 col3</td>
            <td>row3 col4</td>
            <td>row3 col5</td>
            <td>row3 col6</td>
            <td>row3 col7</td>
        </tr>
        <tr>
            <td>row4 col1</td>
            <td>row4 col2</td>
            <td>row4 col3</td>
            <td>row4 col4</td>
            <td>row4 col5</td>
            <td>row4 col6</td>
            <td>row4 col7</td>
        </tr>
    </table> <br><br>
    <table id='y' class='x' border="1">
        <tr  class='x' >
            <td class='x' >row1 col1 - The quick brown fox jumps over the lazy dog</td>
            <td class='x' >row1 col2 - The quick brown fox jumps over the lazy dog</td>
            <td class='x' >row1 col3 - The quick brown fox jumps over the lazy dog</td>
            <td class='x' >row1 col4 - The quick brown fox jumps over the lazy dog</td>
            <td class='x' >row1 col5 - The quick brown fox jumps over the lazy dog</td>
            <td class='x' >row1 col6 - The quick brown fox jumps over the lazy dog</td>
            <td class='x' >row1 col7 - The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td class='x' >row2 col1</td>
            <td class='x' >row2 col2</td>
            <td class='x' >row2 col4</td>
            <td class='x' >row2 col5</td>
            <td class='x' >row2 col6</td>
            <td class='x' >row2 col7</td>
        </tr>
        <tr class='x' >
            <td>row3 col1</td>
            <td>row3 col2</td>
            <td>row3 col3</td>
            <td>row3 col4</td>
            <td>row3 col5</td>
            <td>row3 col6</td>
            <td>row3 col7</td>
        </tr>
        <tr class='x' >
            <td>row4 col1</td>
            <td>row4 col2</td>
            <td>row4 col3</td>
            <td>row4 col4</td>
            <td>row4 col5</td>
            <td>row4 col6</td>
            <td>row4 col7</td>
        </tr>
    </table>    
</body>
</html>

CodePudding user response：

Add white-space: nowrap; overflow: hidden; text-overflow: ellipsis; to all td elements.

td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Or create a separate CSS class that you can use where it's needed.

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<td >row1 col1 - The quick brown fox jumps over the lazy dog</td>

https://jsfiddle.net/wvq64zfu/

CodePudding user response：

use the whitespace attribute and set it's value to no-wrap as below

    td {
    white-space: nowrap;
}