CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Michael
Michael

Reputation: 13614

How to make HTML elements in one row?

I have this HTML rows:

<table class="table table-responsive table-hover">
    <thead>
        <tr>
            <th>Type Object</th>
            <th style="width: 100px;text-align: left">
                <a class="btn btn-primary btn-sm">
                    <i class="glyphicon glyphicon-plus"></i>
                </a>
            </th>
        </tr>
    </thead>
    <tbody ng-repeat="object in objects track by object.Id">
        <tr>
            <td ng-bind="object.Name"></td>
            <td>
                <a class="btn btn-default btn-xs" ng-click="object.showPhoto = !object.showPhoto; $event.stopPropagation();"><i class="glyphicon glyphicon-camera"></i></a>
                <a class="btn btn-default btn-xs" ui-sref="objects.view({regionId:region.Id, objectId:object.Id})" ng-click="$event.stopPropagation();"><i class="glyphicon glyphicon-info-sign"></i></a>
                <a class="btn btn-default btn-xs" ng-click="zoomObject(object); $event.stopPropagation();"><i class="glyphicon glyphicon-screenshot"></i></a>
                <a class="btn btn-default btn-xs" ng-click="object.showReview = object.showReview;"><i class="glyphicon glyphicon-list-alt"></i></a>
            </td>
        </tr>
        <tr ng-if="object.showPhoto">
            <td colspan="2"><img ng-src="{{getPhotoUrl(object)}}" style="max-width: 100%;" alt="Image Object" /></td>
        </tr>
        <tr ng-if="object.showReview">
            <td colspan="2">nnn!!!</td>
            <list-of-insp></list-of-insp>
        </tr>
    </tbody>
</table>

Here how it's looks in view:

enter image description here

My question is how can I make all elements to be in one row?

Upvotes: 0

Views: 1384

Answers (2)

jmancherje
jmancherje

Reputation: 6633

Float each element left and wrap them in an element/div with a minimum width of at least the size of all 4 elements

Upvotes: 1

max
max

Reputation: 8667

<th style="width: 100px;text-align: left">

Change it to something like 200px.

Second thing - your table is not responsive, in Bootstrap you have to create another div above the table with class table-responsive.

Upvotes: 2

Related Questions