Diagonal Division of table cell

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • akverma1989
    New Member
    • Nov 2013
    • 1

    Diagonal Division of table cell

    How to divide a table cell diagonally and insert data inside the divided parts i.e. one cell containing two data, when cell is divided diagonally.
  • johny10151981
    Top Contributor
    • Jan 2010
    • 1059

    #2
    Code:
    <html>
    <style>
    .line {
        display:inline-block;
        border: 1px solid #ccc;
        margin: 10px;
        padding: 10px;   background:url(APNGImageWithWhiteBackgroundAndASingleDiagonalLineInTheMiddle.png);
        background-size:100% 100%;
    }
    </style>
    <body>
    	<div class="line">
    		<TABLE>
    			<TR>
    				<TD width='50%'>Text</TD>
    				<TD width='50%'>&nbsp;</TD>
    			</TR>
    			<TR>
    				<TD width='50%'>&nbsp;</TD>
    				<TD width='50%'>Text</TD>
    			</TR>
    		</TABLE>
    	</div>
    </body>
    </html>
    part of this code is copied from some other site part is modified for you. for the PNG file see the
    Code:
    http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png
    image
    Last edited by johny10151981; Nov 27 '13, 12:52 AM. Reason: Removing unexpected code in the source

    Comment

    Working...