Home  >  Article  >  Web Front-end  >  html split cell_html/css_WEB-ITnose

html split cell_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:17:282380browse

One of the interview questions is to achieve the effect of the table below. I tried several times and couldn't achieve it. Please tell me if there is any problem with this question.
Specify the reason. If there is no problem, give the correct html code. Thank you


Reply to the discussion (solution)

I can only merge but never heard of splitting.

<table border="1">    <tr>        <td rowspan=2>1</td>        <td>2</td>        <td>3</td>    </tr>    <tr>        <td rowspan=2 colspan=2>5</td>    </tr>    <tr>        <td>4</td>    </tr></table>

080b747a20f9163200dd0a7d304ba388
.style1
{
width: 100px;
height:90px;
text-align: center;
                                         ;td rowspan="2">
1
1 b90dd5946f0946207856a8a37f441edf
2 🎜>                                                                                                                                                       cb5fba82ae798c44968ca303cd23f4d7
                                                                                                                   ;/table>

Wouldn’t it be restored if these two attributes rowspan=2 and colspan=2 are set to empty? That is to say, it is split

Please test the code you wrote to see if the effect is the same as the picture I took! ! ! Your effect can only be that the picture below is not the effect required by the question



Is there something wrong with this question asked by the interviewer? Wait for the reply

Use Multiple div layers should work.

Just add a height to the row 0af631068e1136f57a7cadf57e7a75b85b90dd5946f0946207856a8a37f441edf
886081dd9c44f6d5aa1d26193f75bcdb
                                              b6c5a531a458a2e790c1fd6421739d1c3b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
b5f8759c6d5deb2a5b82b635b0fe6ac4
0af631068e1136f57a7cadf57e7a75b85b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8

给 25ac9b3a1e6d002a4baa61afa641f0bb5b90dd5946f0946207856a8a37f441edf 这一行加个高度就可以了
e515d93096ecaae166169d905e0e5902 
    a34de1251f0d9fe1e645927f19a896e8 
        9072113a97bdd80bf81120037db49a6f1b90dd5946f0946207856a8a37f441edf 
        b6c5a531a458a2e790c1fd6421739d1c2b90dd5946f0946207856a8a37f441edf 
        b6c5a531a458a2e790c1fd6421739d1c3b90dd5946f0946207856a8a37f441edf 
    fb4c923824ac583a296b910e94e2f88d
a34de1251f0d9fe1e645927f19a896e8
749a9165faad6e1a6ac8843fee438c0c1b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c2b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c3b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
5e9c4e95f5fd489d6d839aa9cae45bc95b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c4b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08

Statement:
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