标签: html-table
如何设置<td>宽度以直观截断其显示的内容？
我正在尝试设置一个表的列宽,它可以正常工作,直到它到达子元素将被视觉截断的点...然后它将不会更小.("视觉截断" - 不适合似乎隐藏在下一列后面)
以下是一些示例代码来演示我的问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
var intervalID = null;
function btn_onClick()
{
// keep it simple, only click once
var btn = document.getElementById("btn");
btn.disabled = true;
// start shrinking
intervalID = window.setInterval( "shrinkLeftCell();", 100);
}
function shrinkLeftCell()
{
// get elements
var td1 = document.getElementById("td1");
var td2 = document.getElementById("td2");
// initialize for first pass
if( "undefined" == typeof( td1.originalWidth))
{
td1.originalWidth = td1.offsetWidth;
td1.currentShrinkCount = td1.offsetWidth;
}
// …20
推荐指数
推荐指数
1
解决办法
解决办法
3万
查看次数
查看次数
jQuery添加HTML表列
我有一个像这样的HTML表格:
<table border="1">
<tbody>
<tr>
<td><a href="#" class="delete">DELETE ROW</a>COL 1</td>
<td><a href="#" class="delete">DELETE COL</a>COL 2</td>
<td><a href="#" class="delete">DELETE COL</a>COL 3</td>
<td><a href="#" class="delete">DELETE COL</a>COL 4</td>
<td><a href="#" class="delete">DELETE COL</a>COL 5</td>
<td><a href="#" class="delete">DELETE COL</a>COL 6</td>
</tr>
<tr>
<td>ROW 1</td>
<td>ROW 1</td>
<td>ROW 1</td>
<td>ROW 1</td>
<td>ROW 1</td>
<td>ROW 1</td>
</tr>
<tr>
<td>ROW 2</td>
<td>ROW 2</td>
<td>ROW 2</td>
<td>ROW 2</td>
<td>ROW 2</td>
<td>ROW 2</td>
</tr>
</tbody>
</table>
我需要的是一个函数来添加一个基于其他列的td的新列.问题是在这个HTML表中,在添加新列之前使用jQuery删除列,因此函数需要获取当前列配置并相应地进行调整,因为行和列总是被删除或添加.
我有这个代码用于添加新列但它不添加标题:
function addACol() {
var currentNumberOfTDsInARow = $('.tblModel tr:first td').length;
newColNum = currentNumberOfTDsInARow; …20
推荐指数
推荐指数
2
解决办法
解决办法
8万
查看次数
查看次数
html表 - 按行或列
所有浏览器首先按列支持html表.
我知道你可以这样做:
<table>
<tr>
<td></td>
</tr>
</table>
但是你可以先按列建立一个表吗？先做cols有什么不对吗？
20
推荐指数
推荐指数
3
解决办法
解决办法
2万
查看次数
查看次数
在jQuery中将HTML表数据转换为JSON对象
任何人都知道如何将HTML值表转换为一个好的JSON对象,以便使用jQuery进行操作？
20
推荐指数
推荐指数
3
解决办法
解决办法
8万
查看次数
查看次数
如何选择第一个和最后一个<th>？
我的桌子有id="mytable".我试图在第一个和最后一个上应用一些CSS <th>.我试过这个,但它不起作用.
#mytable th:first,
#mytable th:last{
//css goes here
}
20
推荐指数
推荐指数
1
解决办法
解决办法
3万
查看次数
查看次数
如何创建包含colspans的固定表头行？
我有一个从数据库数据创建的大型动态表.我需要列标题行保持固定并滚动必要的行.
我在网上试过很多脚本试图让它正常工作.我想在浏览器上保持简单易用,因为一些目标计算机相当蹩脚.
这是我正在使用的:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample</title>
</head>
<body>
<br><br><br><br>
<table id="A" border="0" width="95%" cellspacing="0" cellpadding="0" align="center" class="base">
<tr bgcolor='gray'>
<td>
<br><br><br>
need the blue column heading rows to remain fixed, and scroll the green rows:<br>
<table id="XYZ" border="1" width="625" cellspacing="0" cellpadding="0" align="center" class="base">
<thead>
<tr>
<th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1a</th>
<th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1b</th>
<th width="75px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1c</th>
<th width="100px" style="border-left:medium solid black;" colspan="3" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 2</th> …20
推荐指数
推荐指数
4
解决办法
解决办法
2万
查看次数
查看次数
将一个表放在TD内
我有一个非常简单的问题:我需要将一个表集中在一个TD元素中.如果我使用HTML 4,我会这样做:
?<table style="border:solid;width: 100%">
<tr>
<td align="center">
<table style="border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>?
但我试图不使用已弃用的属性并以CSS方式执行.我已经尝试过了:
<td style="text-align:center">
还有这个:
<td style="margin: 0 auto">
表格保留在单元格的左侧.有什么建议？
20
推荐指数
推荐指数
1
解决办法
解决办法
4万
查看次数
查看次数
如何在浏览器中确定列宽？
如何确定表中列的实际宽度？下面的代码(在Chrome中)看起来像这样:
我的问题是用"ddd ..."向单元格添加更多字符,不使用自由空间,但其他单元格的内容被包装.有时问题是文本"aaa ..."和"ccc ..."不会重叠.表的总大小是固定的,但所有内容都是动态的,因此不优选固定布局.
更新:尽管包含的文本少于任何实际列,但第一行(c1-c4)对最终布局具有非常显着(可能)的影响.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {background:#000; color:#fff; font-family:'Tahoma'; font-weight:600; }
.container {width:670px; }
table {font-family:'Tahoma'; font-weight:600; border-color: #ffffff; border-width:1px; }
.detail table{margin-left:20px; font-size:24px; width:650px;}
.detail table .operational {text-align:right;}
</style>
</head>
<body>
<div class="detail">
<table border="1px" cellpadding="0px" cellspacing="0px" >
<tbody>
<!-- first row and borders only for debuging-->
<tr>
<td >c1</td>
<td >c2</td>
<td >c3</td>
<td >c4</td>
</tr>
<tr >
<td class="caption">Date</td>
<td class="value">17.6.2013</td>
<td class="operational" colspan="2">aaaaaaaaaaaaaaaaaaaaaaa</td> …20
推荐指数
推荐指数
1
解决办法
解决办法
8893
查看次数
查看次数
删除twitter bootstrap表的第一行
众所周知,当您使用Twitter Bootstrap获取表格时,您会得到如下结果:
是否有可能删除表格的第一行,即"Abos Girolamo"上面的那一行？谢谢
更新:这是表的代码:
<table class="table table-no-border">
<tbody>
<tr>
<td>Abos Girolamo</td>
</tr>
<tr>
<td>Aboulker Isabelle</td>
</tr>
<tr>
<td>Adam Adolphe</td>
</tr>
</tbody>
</table>
20
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数
Bootstrap 3表 - 表响应不起作用
我正在使用bootstrap 3进行网站项目.我正在尝试使用响应表创建一个页面,这样当表格太大时我就会有滚动条.我做了一个像这样的测试用例:
<div class="row">
<h4>Nuværende kurser</h4>
<div class="col-12 col-sm-12 col-lg-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div> …html html-table responsive-design twitter-bootstrap twitter-bootstrap-3
20
推荐指数
推荐指数
4
解决办法
解决办法
5万
查看次数
查看次数