Table with table-layout:fixed

by ptomblin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<body class="ie8">
    <section class="container">
        <form action="{% url 'uar_app_info_completed'
  review_id=review_id category_id=category_id app_id=app_id %}" method="post">
            <input type="hidden" name="csrfmiddlewaretoken" value="cqIewm6HQ8biVotBwKfpKC3A9RyxIPxs">
            <form action="{% url 'uar_app_info_completed'
  review_id=review_id category_id=category_id app_id=app_id %}" method="post">
                <input type="hidden" name="csrfmiddlewaretoken" value="cqIewm6HQ8biVotBwKfpKC3A9RyxIPxs">
                <table class="table table-striped" width="940">
                    <tbody>
                        <tr>
                            <td colspan="10">
                                 <h3>New To Review</h3>

                            </td>
                        </tr>
                        <tr>
                            <th style="min-width: 6em">Person Name</th>
                            <!-- <th style="min-width: 3em">Cost Center</th>
      <th style="min-width: 3em">Windows Id</th> -->
                            <th style="min-width: 2em">System Id 0</th>
                            <th style="min-width: 2em">System Id 1</th>
                            <th class="th-attr" data-ot="&lt;h4&gt;Attr #0&lt;/h4&gt;&lt;br&gt;Long Attribute Description 0">Attr #0</th>
                            <th class="th-attr" data-ot="&lt;h4&gt;Attr #1&lt;/h4&gt;&lt;br&gt;Long Attribute Description 1">Attr #1</th>
                            <th class="th-attr" data-ot="&lt;h4&gt;Attr #2&lt;/h4&gt;&lt;br&gt;Long Attribute Description 2">Attr #2</th>
                            <th class="th-attr" data-ot="&lt;h4&gt;Attr #3&lt;/h4&gt;&lt;br&gt;Long Attribute Description 3">Attr #3</th>
                            <th...

CSS

.ie8 table.table, .ie9 table.table {
    table-layout: fixed;
}
table.table tr td {
    max-width: 40px;
}
table.table tr td.attr-parent {
    max-width: 100px;
}
table.table td div.attr {
    width: 100%;
    max-width: 100%;
    padding: 2px;
}
table.table .attr.no-wrap {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
table.table div.btn-group {
    width: 100%;
    max-width: 100%;
}