如何让数据对齐到html表格行的顶部

2024-01-14

我有这个 html 表,其中表中有一个单元格rowSpan = 3。因此,在第一列中,我有 3 行带有输入,在第二列中,我有一张显示跨越所有 3 列的图片。我试图弄清楚浏览器如何计算出如何为第一列中的每一行垂直分配间距。

然后我想变得“紧”,这样所有的空白空间(如果图片很大,就到底部)。

但似乎空白空间被平均分配到每一行。

有没有办法改变这种行为。 。

这是表格:

<table class="input" border="1">
<tbody>
    <tr>
        <td valign="top">G:</td>
        <td valign="top">
            <select id="GId" maxlength="50" name="GId">
                <option></option>
                <option value="2">Joe</option>
                <option selected="selected" value="3">Bill</option>
            </select>
        </td>
        <td id="imageBorder" rowspan="3" align="center">
            <img class="my_img" src="http://www.example.com/image.png">
        </td>
    </tr>
    <tr>
        <td valign="top">Type:</td>
        <td valign="top">
            <select id="EId" maxlength="50" name="EId">
                <option></option>
                <option value="10"></option>
                <option selected="selected" value="2">A</option>
                <option value="4">C</option>
            </select>
        </td>
    </tr>
    <tr>
        <td valign="top">Manager:</td>
        <td valign="top">
            <select id="ManagerPersonId" maxlength="50" name="ManagerPersonId">
                <option></option>
                <option value="204">A</option>
                <option value="183">B</option>
            </select>
        </td>
    </tr>
    <tr>
        <td valign="top">PictureL:</td>
        <td colspan="2" valign="top">
            <input id="PictureLink" maxlength="200" name="PictureLink" size="60" value="http://www.example.com/image.png" type="text">
        </td>
    </tr>
</tbody>
</table>

我认为你希望前两行的高度最小,如果图片很大,则所有空间都放在第三行。如果是这种情况,请为前两行设置高度,如下所示:

  <table class="input" border="1">
     <tbody>
      <tr>
       <td valign="top" height="1">G:</td>
       <td valign="top">
            <select id="GId" maxlength="50" name="GId">
                <option value="2">Joe</option>
                <option selected="selected" value="3">Bill</option>
            </select>
       </td>
       <td id="imageBorder" rowspan="3" align="center"><img class="my_img" src="http://www.mysite.com/image.png"> </td>
      </tr>
      <tr>
       <td valign="top" height="1">Type:</td>
       <td valign="top">
            <select id="EId" maxlength="50" name="EId">
                <option value="10"></option>
                <option selected="selected" value="2">A</option>
                <option value="4">C</option>
            </select>
       </td>
     </tr>
     <tr>
        <td valign="top">Manager:</td>
        <td valign="top">
            <select id="ManagerPersonId" maxlength="50" name="ManagerPersonId">
                <option value="204">A</option>
                <option value="183">B</option>
            </select>
        </td>
     </tr>
     <tr>
      <td valign="top">PictureL:</td>
      <td colspan="2" valign="top"><input id="PictureLink" maxlength="200" name="PictureLink" size="60" value="http://www.mysite.com/image.png" type="text">
     </td>
    </tr>
   </tbody>
 </table>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何让数据对齐到html表格行的顶部 的相关文章

  • 是否可以使用 JavaScript 导入 HTML?

    我有一些具有相同页脚的 html 页面 使用 JavaScript 并且仅使用 JavaScript 我可以在其中导入另一个 html 页面吗 下面介绍了如何仅使用 JavaScript 向页面添加页脚 2022 代码 使用fetch ht
  • Bootstrap 将图像与文本对齐

    我正在尝试使用引导程序将左侧的图像与文本对齐 并且当在移动设备上查看页面时 图像将居中于文本顶部 div class container div class row h1 About Me h1 div class col md 4 div
  • 当用户将鼠标悬停在图像上时防止 Edge 显示视觉搜索图标

    Microsoft Edge 最近向网页上超过一定尺寸的所有图像添加了一个新的悬停图标 视觉搜索 似乎对所有高于 180px 的图像显示 用户可以在 Edge 设置中删除它 但我正在寻找 HTML CSS 中的解决方案 以防止将鼠标悬停在
  • 响应式 CSS 圆圈

    Goal 响应式 CSS 圈子 具有相等半径的刻度 半径可以按百分比计算 半径可以通过媒体查询来控制 如果解决方案是javascript 我仍然需要模拟媒体查询触发器 我不需要媒体查询 但我确实希望能够在某些宽度下按百分比控制半径 medi
  • 将本地 HTML 文件/代码导入 Web 浏览器

    我正在尝试让本地 HTML 文件显示在WebBrowser在 VB NET 程序中 我正在使用下面的代码 但它似乎不起作用 我不明白为什么 first method WebBrowser1 Navigate index html secon
  • HTML、溢出:滚动和浮动

    我有一个 div 封装了许多无序列表 ul 我将每个 ul 设置为 float left 我还将包含它们的父 div 设置为 overflow x scroll 发生的情况是 ul 在到达页面边缘时会换行 而不是并排放置以利用父 div 的
  • 如何使用纯html5连接服务器端数据库?

    我们可以使用纯 html5 访问服务器端数据库 即不使用 PHP ASP 或任何其他后端语言 吗 我们可以使用Web sql数据库 但它存储在客户端 我需要访问服务器端数据库 可能是 mysql 或任何其他 HTML5 只是一个静态文档 因
  • 内部分页:避免不工作

    我的 Wordpress 网站有一个打印样式表 我希望图像打印在单个页面上而不是跨页面拆分 在某些情况下 甚至几行文本也会被分割到不同的页面上 我已经包括了img page break avoid 在我的打印样式表中 但没有运气 我找到了一
  • Bootstrap 4 - 带按钮标签的居中文本

    我想实现一个非常简单的目标 我有一条线 文本向左对齐 按钮向右对齐 我希望文本与按钮的标签垂直对齐 我尝试使用填充 边距 但没有任何效果 我相信我缺少一个简单而智能的解决方案 笨蛋演示 https plnkr co edit KwRF2uO
  • 单击锚标记添加一个类

    假设我有以下 HTML a class active href section1 Link 1 a a href section2 Link 2 a 单击链接 2 时 我希望它接收活动类并从链接 1 本身中删除该类 这样它实际上会变成 a
  • 如何从浏览器打印 PDF

    在Web应用程序中 是否可以强制在客户端上打印PDF文件 如果浏览器配置为在窗口内打开 PDF 我想调用 window print 会起作用 但某些浏览器 例如我的 被配置为在外部打开 PDF 谷歌文档的做法是将 JavaScript 嵌入
  • CSS 样式直到刷新才应用

    我有一个具有以下 CSS 样式的网页 该样式覆盖了一些更高级别的样式 pnlActions background image webkit gradient linear left top left bottom from 000 to 0
  • 将 PictureStream 转换为 HTML5 画布

    我正在从 net Web 服务检索图片流的字节数组 JSON 字节数组响应如下所示 137 80 78 372 617 more 我正在尝试转换这个字节数组并将其绘制到 HTML 画布中 如下所示 var context document
  • 从 org-mode 导出 html:自定义日期格式

    我正在将 org 文件导出为 html 我在 Emacs 24 中使用 Org mode 7 9 3f 如何在帖子中获得自定义时间格式 我尝试将变量 org export html postamble format 设置为 setq org
  • 修复了 Google 地图混搭中的图例

    我有一个带有 Google 地图混搭的页面 其中的图钉按日期 周一 周二等 进行颜色编码 包含地图的 IFrame 是动态调整大小的 因此当浏览器窗口调整大小时 它也会调整大小 我想在地图窗口的一角放置一个图例 告诉用户每种颜色的含义 Go
  • 从 Angular 4 中的 html 中删除主机组件标签

    我有一个表 我想在其中显示一个表行 它是一个组件 我还想将数据传递给该组件 table th td col 1 td td col 2 td td col 3 td th tr tr table
  • 如何在上传图像文件时禁用捕获(在ipad上使用safari)

    我想在 ipad 上使用 safari 上传图像 这是我的 html 代码
  • 如何在鼠标悬停时覆盖 div / box?

    我有一个链接 当用户将鼠标悬停在其上时 它应该在链接下显示一个框 div 盒子应该覆盖其下方的所有内容 我如何使用 css 或 javascript 来做到这一点 您有一个隐藏的绝对定位的 div 和链接的子级 然后 当您将鼠标悬停在链接上
  • Safari 10.0.1 未从 srcset 选择正确的图像

    Safari 无法正确处理我网站上某些图像的 srcset 并且完全忽略我在尺寸属性中设置的规则 如果您单击下面的链接并在 Safari 中查看它 您将看到顶部的图像以其原始尺寸显示 而不是我生成的尺寸 但是 在页面底部它有效吗 并已下载为
  • 使用 Bootstrap 3 具有固定高度、标题和列宽度的表格

    我想要一张具有以下功能的表 固定标题 固定高度 带有可见的滚动条 3个固定宽度的列 一个大列和两个窄列 我开始使用 tbody display block overflow auto height 100px 为了至少获得固定高度 但此规则

随机推荐