Css 配合宽度<；td>；充实_Css_Html Table

Css 配合宽度<；td>；充实

css

Css 配合宽度<；td>；充实,css,html-table,Css,Html Table,我有一个HTML表，我想将第一列的宽度设置为该列单元格中最大项的宽度当我将宽度设置为50px时，它看起来很好：但是，如果我将宽度设置为“自动”，它会扩展得太多：它为什么会这样做？我如何解决这个问题这是我的密码： <html> <body> <style type="text/css"> .tg {border-collapse:collapse;border-spacing:0;border-col

我有一个HTML表，我想将第一列的宽度设置为该列单元格中最大项的宽度

当我将宽度设置为50px时，它看起来很好：

但是，如果我将宽度设置为“自动”，它会扩展得太多：

它为什么会这样做？我如何解决这个问题

这是我的密码：

<html>
    <body>
        <style type="text/css">
            .tg  {border-collapse:collapse;border-spacing:0;border-color:#ccc;}
            .tg td{font-family:Calibri, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#fff;}
            .tg th{font-family:Calibri, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#f0f0f0;}
            .tg .tg-j4kc{background-color:#efefef;text-align:center}
            .tg .tg-ud5c{background-color:#efefef;text-align:right;width:auto}
            p.italic{font-style: italic}
        </style>

        <font face="Calibri, Arial, Sans-Serif" font size="3">
            The script<br><br>

            <p class="italic">' + $ScriptName + '</p>

            has sent a notification. See below for details...
        </font><br><br>

        <table class="tg" style='width:700px'>
            <tr>
                <th class="tg-j4kc" colspan="2">Script</th>
            </tr>
            <tr>
                <td class="tg-ud5c">Path</td>
                <td>"' + $ScriptPath + '"</td>
            </tr>
            <tr>
                <td class="tg-ud5c">Server</td>
                <td>' + $Server + '</td>
            </tr>
            <tr>
                <td class="tg-ud5c">Name</td>
                <td>' + $ScriptName + '</td>
            </tr>
        </table>

        <font face="Calibri, Arial, Sans-Serif" font size="3">
            <br><u>Notification</u>
            <br><br>' + $NotificationContent + '
        </font>
    </body>
</html>


.tg{边框折叠：折叠；边框间距：0；边框颜色：#ccc；}
.tg td{字体系列：Calibri，无衬线；字体大小：14px；填充：10px 5px；边框样式：实心；边框宽度：1px；溢出：隐藏；分词：正常；边框颜色：#ccc；颜色：#333；背景颜色：#fff；}
.tg th{字体系列：Calibri，无衬线；字体大小：14px；字体重量：正常；填充：10px 5px；边框样式：实心；边框宽度：1px；溢出：隐藏；分词：正常；边框颜色：#ccc；颜色：#333；背景颜色：#f0f0；}
.tg.tg-j4kc{背景色：#efefef；文本对齐：中间}
.tg.tg-ud5c{背景色：#efefef；文本对齐：右；宽度：自动}
p、 斜体{字体样式：斜体}
脚本


'+$ScriptName+'
已发送通知。详情见下文。。。



剧本
路径
“'+$ScriptPath+'”
服务器
“+$Server+”
名称
“+$ScriptName+”

通知


“+$NotificationContent+”

编辑：
当我从

参数中删除

style='width:700px'

时，它似乎可以工作

我希望表格有一个固定的宽度，因为可能有多个表格，我不希望每个表格都有不同的宽度。

更改css如下：-

tg .tg-ud5c {
    background-color:#efefef;
    text-align:right;
    width:1%;
    white-space: nowrap;
}

更新小提琴：

< P>根据这是否是一个响应表，你可以考虑使用列的最大宽度或最小宽度属性，作为先前建议的另一种选择。

这里的小提琴可能与@黄教有关——你的小提琴看起来与MARIU5的第二个图像相同。他不想复制第一个的样子吗？@enhzflep是的，OP想要第一个，我做了小提琴来支持这个问题，这将使人们更容易用它来解决问题。如果OP有一把小提琴，我不会做一把，我认为说TL是正确的；博士，因为有人认为它应该这样做