How to control html table column width in combination with text-overflow

StackOverflow https://stackoverflow.com/questions/11187681

  •  16-06-2021
  •  | 
  •  

Вопрос

Given the following html table, I would like to control the width of the first column by setting the width of the 'col' element instead of setting it on the div element, without losing the ellipsis. Is that possible with just using html and CSS?

<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<col /><!-- ** set width here ** -->
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td>
    <div class="hideextra" style="width:200px">
                this is the text in column one which wraps</div></td>
   <td>
        <div class="hideextra" style="width:100px">
                this is the column two test</div></td>
</tr>
</table>
</body>
</html>
Это было полезно?

Решение

it can be done like this:

<table border="1" width="100%" style="table-layout: fixed; ">
<col width="60px">
<tr>
    <td style="overflow: hidden;text-overflow: ellipsis;">500.000.000.000.000</td>
    <td>10.000</td>
</tr>
<tr>
    <td>1.500.000</td>
    <td>2.000</td>
</tr>
</table>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top