JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="user">
    <div class="entry-boxeditable" id="boxedit-0">
<pre>other_stream || false</pre>
        <table id="user" class="table table-bordered table-striped">
            <tbody>
                <tr></tr>
            </tbody>
            <tbody>
                <tr>
                    <td>false</td>
                    <td>plother2</td>
                    <td>2014-06-03 09:55:32</td>
                    <td>otherlocation/mystream</td>
                </tr>
                <tr>
                    <td>false</td>
                    <td>plother2</td>
                    <td>2014-06-03 09:55:32</td>
                    <td>http:/local/demo.mp4</td>
                </tr>
            </tbody>
        </table>
<pre>stackoverflow || true</pre>
        <table id="user" class="table table-bordered table-striped">
            <tbody>
                <tr></tr>
            </tbody>
            <tbody>
                <tr>
                    <td>true</td>
                    <td>plname1</td>
                    <td>2009-12-11 16:25:05</td>
                    <td>C:\sample.mp4</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

td {
    width: 25% !important;
}

JavaScript

/*! X-editable - v1.5.1 
 * In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
 * http://github.com/vitalets/x-editable
 * Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */.editableform {
    margin - bottom: 0; /* overwrites bootstrap margin */
}

.editableform.control - group {
    margin - bottom: 0; /* overwrites bootstrap margin */
    white - space: nowrap; /* prevent wrapping buttons on new line */
    line - height: 20px; /* overwriting bootstrap line-height. See #133 */
}

/* 
  BS3 width:1005 for inputs breaks editable form in popup 
  See: https://github.com/vitalets/x-editable/issues/393
*/
.editableform.form - control {
    width: auto;
}

.editable - buttons {
    display: inline - block; /* should be inline to take effect of parent's white-space: nowrap */
    vertical - align: top;
    margin - left: 7px;
    /* inline-block emulation for IE7*/
    zoom: 1; * display: inline;
}

.editable - buttons.editable - buttons - bottom {
    display: block;
    margin - top: 7px;
    margin - left: 0;
}

.editable - input {
    vertical - align: top;
    display: inline - block; /* should be inline to take effect of parent's white-space: nowrap */
    width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
    white - space: normal; /* reset white-space decalred in parent*/
    /* display-inline emulation for IE7*/
    zoom: 1; * display: inline;
}

.editable - buttons.editable - cancel {
    margin - left: 7px;
}

/*for jquery-ui buttons need set height to look more pretty*/.editable - buttons button.ui - button - icon - only {
    height: 24px;
    width: 30px;
}

.editableform - loading {
    background: url('../img/loading.gif') center center no - repeat;
    height: 25px;
    width: auto;
    min - width: 25px;
}

.editable - inline.editableform - loading {
    background - position: left 5px;
}

.editable - error - block {
    max - width: 300px;
    margin: 5px 0 0 0;
    width: auto;
    white - space:...