html - css 旋转 <input> 标签增加了 td 中的空间

Question

我正在使用带有输入标签的表格创建一个象限。我已经使用 css 旋转了 x 轴的标签。旋转输入标签使单元格比我想要的更宽。我怎样才能避免这种情况？

fiddle 在这里 http://jsfiddle.net/decker2/0zq252xy/1/

这是CSS

.rotate {
transform: rotate(90deg);}

HTML 表格

<table border="1">
<tr>
    <td colspan="2" rowspan="3" width="40">
        <input class="rotate"></input>
    </td>
    <td width="200" height="200">
        <input></input>
    </td>
    <td width="200" hight="200">
        <input></input>
    </td>
</tr>
<tr>
    <td height="200" width="200">
        <input></input>
    </td>
    <td>
        <input></input>
    </td>
</tr>
<tr>
    <td colspan="4" height="40">
        <input></input>
    </td>
</tr>

Answer 1

它并不完美，可能需要调整，但您可以将输入包装在固定宽度的 div 中，然后旋转那个。

/*added by T Morphy*/
 .DivWithScroll {
    height: auto;
    width: auto;
    overflow: hidden;
    height: 1%;
    overflow-y: auto;
    overflow-x: auto;
}
#main {
    font-family:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:white;
}
.textfill {
    text-align: center;
    /* center checkbox horizontally */
    vertical-align: middle;
    /* center checkbox vertically */
}

.wrapper {
    width:40px;
}
.rotate {
    transform: rotate(90deg) translateX(-100%);
    /*position: absolute;    */
}
td {
    text-align: center;
    /* center checkbox horizontally */
    /*vertical-align: middle; /* center checkbox vertically */
}
/* end of T Morphy add */
 div.orgChart {
    border : 1px solid #cccccc;
    background-color : #fff;
    margin : 10px;
    padding : 20px;
}
div.orgChart h2 {
    margin : 0px;
    font-size : 1em;
    border-bottom : none;
}
div.orgChart ul {
    list-style : none;
    margin : 4px;
    padding : 0px;
    font-size : 0.8em;
    text-align : left;
}
div.orgChart ul.stack, div.orgChart ul.stack ul {
    text-align : center;
}
div.orgChart table {
    width : 100%;
}
div.orgChart tr.lines td.line {
    width : 1px;
    height : 20px;
}
div.orgChart tr.lines td.top {
    border-top : 3px solid gray;
}
div.orgChart tr.lines td.left {
    border-right : 2px solid gray;
}
div.orgChart tr.lines td.right {
    border-left : 2px solid gray;
}
div.orgChart td {
    text-align : center;
    vertical-align : top;
    padding : 0px 2px;
    border: 1px solid black;
}
div.orgChart div.node {
    cursor : default;
    border : 1px solid #cccccc;
    display : inline-block;
    padding : 0 4px;
    width : 96px;
    height : 60px;
    background: linear-gradient(to bottom, #73BBDF 0%, rgba(26, 118, 179, 1) 100%) repeat scroll 0% 0% transparent;
    line-height: 1.3em;
    border-radius: 8px;
    box-shadow: 0px -1px 3px rgba(190, 255, 255, 0.5), 2px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(0, 0, 0, 0.5) inset, 0px 1px 1px #FFF inset;
    filter: none;
}
div.orgChart div.hasChildren {
    background-color : #ffff98;
}
div.orgChart.interactive div.hasChildren {
    cursor : pointer;
}
div.orgChart div.node.hover {
    background-color : white;
}

<table border="1">
    <tr>
        <td colspan="2" rowspan="3" width="40">
            <div class="wrapper rotate">
            <input></input>
            </div>
        </td>
        <td width="200" height="200">
            <input></input>
        </td>
        <td width="200" hight="200">
            <input></input>
        </td>
    </tr>
    <tr>
        <td height="200" width="200">
            <input></input>
        </td>
        <td>
            <input></input>
        </td>
    </tr>
    <tr>
        <td colspan="4" height="40">
            <input></input>
        </td>
    </tr>
</table>