个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我需要做什么才能让“标题”包含在这个片段中？此外，当它包裹时，它应该将 table 向下推。下面是一张图片。我希望以 This is the title 开头的行换行。
我已经导入了 JS Fiddle
代码:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ANSI">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<style type='text/css'>
#body {
width:400px;
margin:0 auto;
background-color: #fff;
}
#content-1 {
float:left;
width:100%;
background:#f7f7f7;
}
#wrapper { bottom:0;overflow: hidden; }
.tablecontent { z-index: 99; margin: 10px; padding: 35px 5px 5px 5px;background-color:#FFFFFF; border: 1px solid; border-color: #B8B8B8; border-radius: 4px;}
.tabletitle {color: #005c9c;padding-top: 20px;padding-left: 20px;z-index: 100;position:absolute;}
</style>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart","table"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var cssClassNames = {
'tableCell': 'wrapall'};
var datatable = new google.visualization.DataTable();
datatable.addColumn('string','Country','col1');
datatable.addColumn('number','Metric 1');
datatable.addColumn('number','Metric2');
datatable.addColumn('number','Metric3');
datatable.addRows(2);
datatable.setCell(0,0,'United States');
datatable.setCell(0,1,7);
datatable.setCell(0,2,306);
datatable.setCell(0,3,67.32,'67.32%');
datatable.setCell(1,0,'India');
datatable.setCell(1,1,5);
datatable.setCell(1,2,139);
datatable.setCell(1,3,76.98,'76.98%');
var table = new google.visualization.Table(document.getElementById('dashboardtable_20'));
table.draw(datatable, {showRowNumber: false, 'allowHtml': true, 'cssClassNames': cssClassNames});
}
</script>
</head>
<body>
<div id="body">
<div id="wrapper">
<div id="main">
<div id="content-1">
<div class="tabletitle">This is the title of my widget. But I want this to wrap if the title is long.</div>
<div id="dashboardtable_20" class="tablecontent"></div>
</div>
</div>
</div>
</body>
</html>
最佳答案
我建议不要使用 position:absolute，而是尝试匹配标题和表格的样式，如下所示:
.tablecontent {
margin: 10px;
padding: 5px;
background-color: #FFFFFF;
border: 1px solid #B8B8B8;
border-radius: 0 0 4px 4px;
border-top: none;
margin-top: 0;
}
.tabletitle {
color: #005c9c;
padding: 5px;
background: white;
border: 1px solid #B8B8B8;
border-bottom: none;
margin: 10px;
margin-bottom: 0;
border-radius: 4px 4px 0 0;
}
关于html - 需要 CSS 来换行这个文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28368602/
24
4
0
在 Vaadin 7.0，显示时JavaBean Table 中的数据与 BeanContainer ，用新数据刷新表的正确方法是什么？ 最佳答案 该表通过监听器监视表项的属性。如果您通过表的 Ite
首先，我使用的是带有 Axis2 1.6.2 的 eclipse，我正在 tomcat 6 上部署我创建的 Web 服务。Web 服务是在 eclipse 中通过自上而下的方法创建的。 我被要求使对我
我已将 Rails 3.1.1 应用程序升级到 Rails 3.1.3，现在，对于每个请求，它仅响应错误数量的参数(3 for 1)。不幸的是，它没有说明错误在哪里，并且应用程序跟踪为空。我认为存在一
我是一名优秀的程序员,十分优秀！