한 줄에 html 테이블 행을 강제하는 CSS / Javascript
다음과 같은 HTML 테이블이 있습니다.
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps |two test |
-------------------------------------------------
하지만 오버플로를 숨기고 싶습니다. 그 이유는 텍스트에 자세한 내용에 대한 링크가 포함되어 있고 "래핑"을 사용하면 레이아웃에 많은 공간이 낭비되기 때문입니다. 다음과 같아야합니다 (열이나 테이블의 너비를 늘리지 않고 화면 밖으로 나가거나 그렇지 않으면 수평 스크롤바를 생성하기 때문입니다).
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
-------------------------------------------------
나는 이것을 얻기 위해 많은 다른 CSS 기술을 시도했지만 제대로 된 결과를 얻지 못했습니다. Mootables는 http://joomlicious.com/mootable/ 이 작업을 수행하는 유일한 방법 이지만 어떻게 수행하는지 알 수 없습니다. CSS 및 / 또는 Javascript를 사용하여 내 자신의 테이블로이 작업을 수행하는 방법 또는 Mootables가 수행하는 방법을 아는 사람이 있습니까?
샘플 HTML :
<html><body>
<table width="300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>this is the text in column one which wraps</td>
<td>this is the column two test</td>
</tr>
</table></body></html>
CSS 속성 white-space : nowrap and overflow : hidden on your td를 사용합니다.
최신 정보
방금 귀하의 의견을 보았고, 내가 무슨 생각을했는지 잘 모르겠습니다. 나는 이것을 너무 많이 했어요. 어떻게하는지 잊어 버렸습니다. 이것은 나를 위해 대부분의 브라우저에서 잘 작동하는 접근 방식입니다 ... td를 제한하는 대신 오버플로 인스턴스를 처리하는 td 내부의 div를 사용합니다. 이것은 td의 스타일을 지정하는 대신 패딩, 여백, 배경색 등을 div에 추가 할 수 있다는 좋은 부작용이 있습니다.
<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<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>
보너스로 IE는 브라우저 별 text-overflow : ellipsis 스타일을 사용하는 오버플로의 경우 줄임표를 표시합니다. FireFox에서도 자동으로 동일한 작업 을 수행 할 수 있는 방법이 있지만 직접 테스트하지는 않았습니다.
업데이트 2
I started using this truncation code by Justin Maxwell for several months now which works properly in FireFox too.
This trick here is using the esoteric table-layout:fixed rule
This CSS ought to work against your sample HTML:
table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}
You also ought to specify explicit column widths for the <td>s.
The table-layout:fixed rule says "The cell widths of this table depend on what I say, not on the actual content in the cells". This is useful normally because the browser can begin displaying the table after it has received the first <tr>. Otherwise, the browser has to receive the entire table before it can compute the column widths.
Try:
td, th {
white-space: nowrap;
overflow: hidden;
}
For those further interested:
Existing Dynamic Table Cells: ## Long text with NO SPACES i.e. email addresses ##
It appears a full replication of the MS (and others) use of text-overflow:ellipsis cannot be duped in FireFox so far as adding the internally appended … to clipped text is concerned; especially without javascript which is often user switched off these days.
All ideas I have found to help me have failed to address dynamic resizing and long text without spaces.
However, I had a need for clipping in a dynamic width table in one of my progs admin windows. So with a little fiddling an acceptable all browser answer can be hacked from the supplied samples at “MSDN”.
i.e.
<table width="20%" border="1" STYLE="position: absolute; top: 100;">
<tr>
<td width="100%"><DIV STYLE="position: relative; height: 14px; top: 0px; width:100%;">
<DIV STYLE="position: absolute; left: 0px; top: 0px; color: black; width: 100%; height: 14px;
font: 12px Verdana, Arial, Geneva, sans-serif; overflow: hidden; text-overflow:ellipsis;">
<NOBR>fasfasfasfasfsfsffsdafffsafsfsfsfsfasfsfsfsafsfsfsfWe hold these truths to be self-evident, that all people are created equal.</NOBR></DIV>
</DIV>
</td>
</tr>
</table>
Only small shortcoming is Firefox users don’t see the “…” bit; which is summink I don’t really mind at this stage.
Future FF should, hopefully, resolve gracefully if implementing this very important useful option. So now I don’t need to rewrite using less favorable futuristic non tabled content either (don’t argue; there’s plenty of broken web sites around ’cause of it these days).
Thanks to: http://msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx
Hope it helps some bod.
As cletus said, you should use white-space: nowrap to avoid the line wrapping, and overflow:hidden to hide the overflow. However, in order for a text to be considered overflow, you should set the td/th width, so in case the text requires more than the specified width, it will be considered an overflow, and will be hidden.
Also, if you give a sample web page, responders can provide an updated page with the fix you like.
If you hide the overflow and there is a long word, you risk loosing that word, so you could go one step further and use the "word-wrap" css attribute.
http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx
I wonder if it might be worth using PHP (or another server-side scripting language) or Javascript to truncate the strings to the right length (although calculating the right length is tricky, unless you use a fixed-width font)?
Use position:absolute; and width:xxx%; on the td-Element.
If you don't want the text to wrap and you don't want the size of the column to get bigger then set a width and height on the column and set "overflow: hidden" in your stylesheet.
To do this on only one column you will want to add a class to that column on each row. Otherwise you can set it on all columns, that is up to you.
Html:
<table width="300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td class="column-1">this is the text in column one which wraps</td>
<td>this is the column two test</td>
</tr>
</table>
stylsheet:
.column-1
{
overflow: hidden;
width: 150px;
height: 1.2ex;
}
An ex unit is the relative font size for height, if you are using pixels to set the font size you may wish to use that instead.
참고URL : https://stackoverflow.com/questions/426398/css-javascript-to-force-html-table-row-on-a-single-line
'Programing' 카테고리의 다른 글
| CSS를 사용하여 세로 중앙 회전 텍스트 (0) | 2020.11.11 |
|---|---|
| .NET에는 가비지 수집기가 있기 때문에 종료 자 / 소멸자 / 처리 패턴이 필요한 이유는 무엇입니까? (0) | 2020.11.11 |
| Cocoa 사용자 정의 알림 예제 (0) | 2020.11.11 |
| CSS 목록 스타일 이미지 크기 (0) | 2020.11.11 |
| API 레벨은 무엇을 의미합니까? (0) | 2020.11.11 |