Table TD 如何不换行?

Posted 2023-04-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Table TD 如何不换行?相关的知识，希望对你有一定的参考价值。

参考技术A 你在【2/2页,共13条】的后面，为什么要加一个表格呢？直接把你的截图中显示在第二行的部分，放在一个【<TD></TD>里就好了，和前面的【2/2页,共13条】这个平级，就自然显示在同一行里。
网页布局，要先了解清楚各个标签的特点。
详细看修改后的代码：
<html><HEAD><TITLE></TITLE>
</HEAD>
<BODY style="FONT-SIZE: 12px" class=tab_bkbg>
<TABLE width="100%">
<TBODY>
<TR>

<TD style="FONT-SIZE: 12px; VERTICAL-ALIGN: middle"><BR> 2/2页,共13条</TD>

<TD>
[<A href="/ihmis/homePageAction.do?page=1&searchid=dispalyTable&method=query">首页</A>/<A href="/ihmis/homePageAction.do?page=1&searchid=dispalyTable&method=query"><<</A>]<A title=转向第1页 href="/ihmis/homePageAction.do?page=1&searchid=dispalyTable&method=query">1</A>, 2[>>] 跳到第<INPUT id=-916999359 class=rfidinput2 onkeyup="if(event.keyCode==13)if(isFinite(this.value))if(this.value>=1&& this.value<=2)location.href='/ihmis/homePageAction.do?searchid=dispalyTable&method=query&page='+this.value;elsealert('输入的页号必须是大于等于1小于等于2的数字!');elsealert('请输入数字!');;" value=2 size=4>页
</TD>


<SCRIPT type=text/javascript>highlightTableRows("row");</SCRIPT>
</TR></TBODY></TABLE></BODY></HTML> 参考技术B <nobr>xxxx</nobr>

table 中文字长度大于td宽度，导致文字换行解决方案

1.TD不换行 nowrap属性

表格table的td单元格中，文字长了往往会撑开单元格，但是如果table都不够宽了，就换行了好像（不要较真其他情况，我只说会换行的情况）。换行后的表格显得乱糟糟，不太好看，我不喜欢这样的换行。当然可以通过对每列td都设置宽度，那样太麻烦了，并且有时没法预计td中的文字会有多长，没法给固定宽度。

为了让表格里文字不换行（预计也不会太长的字符串），可以给表格里td添加一个nowrap属性，如 <td nowrap>文字内容</td> 这样。

但是如果给每个td都加上nowrap属性，貌似太繁琐并且占用空间和流量。于是乎，我找css的实现方法，不擅长此术，尝试了n多个样式后，找到white-space: nowrap; 貌似跟直接给td加nowrap差不多，那么就可以像下面这样定义样式，即可实现td里不换行，字符串长了就撑宽表格宽度。

<html>
<head>
    <title>test</title>
    <style type="text/css">
        th {
            width:90px;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th>
                我是乱七八糟的字符串
            </th>
            <th>
                悟空的博客
            </th>
            <th>
                www.7es.cn
            </th>
        </tr>
        <tr>
            <td>
                我是乱七八糟的字
            </td>
            <td>
                我很长哦
            </td>
            <td>
                悟空的博客
            </td>
        </tr>
    </table>
</body>
</html>

2.table 中文字长度大于td宽度，溢出文本用“...”代替

.class1｛
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}

text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。

我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

<html>
<head>
    <title>test</title>
    <style type="text/css">
        .mytable {
            table-layout: fixed;
            width: 400px;
            border: 0px;
            margin: 0px;
        }

        .class1 {
            text-overflow: ellipsis; /* for IE */
            -moz-text-overflow: ellipsis; /* for Firefox,mozilla */
            overflow: hidden;
            white-space: nowrap;
            border: 1px solid;
            text-align: left;
        }
    </style>
</head>
<body>
    <table class="mytable" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th width="30%" class="class1">测试</th>
            <th width="70%" class="class1">测试测试测试测试测试测试测试测试测试测试测试123123</th>
        </tr>
        <tr>
            <td>td1</td>
            <td>td2</td>
        </tr>
    </table>
</body>
</html>

参：

1.TD不换行 nowrap属性

2.table 中文字长度大于td宽度，溢出文本用“...”代替

3.td长度固定，内容过长，超过部分用省略号代替

以上是关于Table TD 如何不换行?的主要内容，如果未能解决你的问题，请参考以下文章

table内的多个input实现不换行

css样式问题，为啥把form表单放进table的td里面，input type='submit'会自动换行啊？如何才可以不换行？

Table里td中的文本过长，设置不换行，随内容同行显示(转载)

HTML的table中td内容换行上下间距怎么设置

td 不换行隐藏显示多余的部分(转)

td标签内容：换行和不换行设置

Table TD 如何不换行?

table 中 文字长度大于td宽度，导致文字换行 解决方案

table 中文字长度大于td宽度，导致文字换行解决方案