Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > html css makes a browsable table_html/css_WEB-ITnose

html css makes a browsable table_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:47:04
Original
1272 people have browsed it

Now the requirements for displaying the table content are as follows:

1. The table is very large and the interface is not small, so it needs to be placed in a div.

2, you can use scroll to view it in the div.

3, the content in td remains in one line.

4, you can click tr, and then you can select and know which line you clicked.

html:

　

　　🎜>//If the div width is smaller than the table, scroll will appear.

#table1 {border-collapse:collapse;height:100;}

#table1 table ,th, td {border: 1px solid black;}

#table1 td{

width:230px; / *The width is set as needed, and the percentage can also be set*/

height:25px;line-height:25px; /*The height is also set as needed*/

white-space:nowrap; /*Text display does not automatically wrap */

/*overflow:hidden;*/ /*Excess display*/

}

#div1 {border: 1px solid red;width:460; height:180px;overflow:scroll;}




js:

Add an onmousedown event handler to the click.
var trs = document.getElementById('table1').getElementsByTagName('tr');
var choose;
window.onload = function(){
for( var i=0; i< ;trs.length; i ){

trs[i].onmousedown = function(){

tronmousedown(this);

}

}

}

function tronmousedown(obj) {
for( var o=1; o if( trs[o] == obj ){
trs[o].style.backgroundColor = 'lightblue';
choose = o;
}
else{
trs[o].style.backgroundColor = '';
}
}
}



You can communicate together.

Related labels：
html+css 做成一个可浏览的表格
source：php.cn
Previous article：html5 canvas (basic rectangle)_html/css_WEB-ITnose Next article：28 types of CSS3 cool loading animation effects_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Generate default values ​​and CSS variables using SCSS I'm implementing website styling. For legacy support reasons, I need to support IE11, at l...
From 2024-04-06 17:46:54
0
1
355
Open calculation documents using window.open() and data: scheme I have a web page that runs in a browser that generates a calculated HTML document that I ...
From 2024-04-06 15:06:34
0
1
378
Should we use SSG to deploy dashboards created with Nuxt.js? We will develop a dashboard for internal use using Nuxt.js. Since this will be an internal...
From 2024-04-06 13:17:44
0
1
493
Launch a transparent browser to improve the experience of web applications and PWA [support static HTML, CSS and JavaScript] [allow users to view desktop wallpapers in our web applications/PWA] I'm a junior front-end developer and designer currently developing a web application (chat...
From 2024-04-05 13:50:12
0
1
1367
Make sure the table cell's container fills the entire height of the parent I'm trying to vertically align the content without using Flexbox, because there are some i...
From 2024-04-04 16:03:18
0
1
404
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved