Line break <tr> contents in CSS

Question

The table looks good on the desktop, but the @media screen of 480x800 makes it go offscreen. Is there a way to line break the contents of table rows in CSS, such that the contents appear on each line instead?

This is how it looks like as of now, i wanted the old man image to proceed to the next line, rather than going offscreen.

This is the html

<div class="sub" id = "history">
            <h1>SCIS Roots</h1>
            <table class = "table">
            <tr>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/bless.jpg" alt = "historyImage1">   </a>
                    <div class = "description">
                        <p class = "description_content">
                        The youngest School in Saint Louis University started with the 
                        vision of the then Vice-President for Finance and later University
                        President, Rev. Fr. Ghisleen de Vos(1976-1983).
                        </p>
                    </div>
                </div>
                </td>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/hist2.png" alt = "historyImage2"></a>
                    <div class = "description">
                        <p class = "description_content"> Fr. de Vos saw the
                            possibility of automating accounting and enrolment systems during
                            a period where computerization was not yet widely practiced.
                        </p>
                    </div>
                </div>  
                </td>
                </tr>
                </table>

                <h3>SCIS- LEVEL UP!</h3>
                <table class = "table">
                <tr>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/hist7.png" alt = "historyImage3"></a>
                    <div class = "description">
                        <p class = "description_content">
                        SLU catered to the computing needs of other institutions in nearby
                        regions when it was acquitted by IBM Systems in 1969 and 1980 until
                        1990.
                        </p>
                    </div>
                </div>
                </td>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/scis.jpg" alt ="historyImage4"></a>
                    <div class ="description">
                        <p class = "description_content">
                        In 1990 it became the Institute of Information and 
                        Computing Science and offered the Computer Science course. The 
                        institute became a college in 1994.
                        </p>
                    </div>
                </div>
                </td>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/hist3.png" alt = "historyImage3"></a>
                        <div class = "description">
                            <p>
                            Courses in Information Technology, Mathematics, Information Management, and Library and
                            Information Science were added over time. By 1995, it was the first
                            in the region to offer a graduate program in IT. 
                            </p>
                        </div>
                </div>
                </td>
                </tr>
                </table>

                <h3>SCIS REACHES OUT!</h3>
                <table class = "table">
                <tr>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/ict.jpg" alt = "historyImage4"></a>
                    <div class = "description">
                        <p>
                        In 2007, it hosted the first ever Northern Luzon International IT
                        conference. This was attended by people from all over the globe and 
                        became an annual event.
                        </p>
                    </div>
                </div>
                </td>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/hist4.jpg" alt = "historyImage4"></a>
                    <div class = "description">
                        <p class = "description_content">
                        To keep up with the trend of Digital Arts technology, the School
                        has since added short diploma courses in digital animation, 
                        multimedia systems, digital design, editing and publishing, and 
                        the like. The School is also the first in the country to offer the
                        trending academic initiative - Masters of Science in Service
                        Management Engineering(MSSME).
                        </p>
                    </div>
                </div>
                </td>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/hist5.png" alt = "historyImage6"></a>
                    <div class = "description">
                        <p class = "description_content">
                        The School is also socially relevant when it comes
                        to sharing its expertise and resources. In 2007, it donated
                        multiple computers to the Baguio City National High School(BCNHS)
                        as part of a collaborative project with the Close the Gap(CTG)
                        alliance program of Belgium. Along with this, the School designed
                        and conducted a series of training programs for the teachers of
                        the BCNHS on several computer and web-based applications.
                        </p>
                    </div>
                </div>
                </td>
                </tr>
                </table>
                <h3>THE FUTURE OF SCIS!</h3>
                    <p id = "future">
                        The School's future looks bright as it continues to soar with the
                        speed of rapid modernization.  The School of Computing and 
                        Information and Sciences recognizes though that the power to 
                        create, command, and control information technology comes with 
                        great responsibility.  The School therefore primes itself not 
                        only on setting new academic directions towards the advancement 
                        of IT and Computing education and research, but also on 
                        advocating the ethical use of information and computing 
                        technology.
                    </p>
        </div>  

This is the css that relates to the table

  .wrapper{  
    float:left; 
    position:relative; 
    margin; 0 auto;
}  
.description{  
    position:absolute; 
    bottom:0px; 
    left:0px;  
    width:100%;  
    background-color:black;  
    font-family: 'tahoma';  
    font-size:15px;  
    color:white;   
    display:none;
    border-radius:3em;
}
a:hover+div{
    display: block;
    opacity:0.6;
}
.description_content{  
    padding:10px;  
    margin:0px;
    display:block;
}
.table{
    margin-left:auto; 
    margin-right:auto;
    padding: 2px;
}

.tableImage{
    width : 304px; 
    height: 228px;
    display: inline;
    border:2px solid;
    border-radius:2em;
    margin:5px;
}
.tableImage:hover{
    width : 350px; 
    height: 300px;
    box-shadow:10px 10px 5px #888888;
}

Answer 1

If you want your page to be responsive, I'd move away from placing content in a table. With regards to the images on your page, I'd place each one in a div. The divs would be placed side-by-side by default, with a media query placing them one of top of another for narrow displays.

HTML

<div class="parent">
    <div class="img-container">
        <img src="..."></img>
    </div>
    <div class="img-container">
        <img src="..."></img>
    </div>
</div>

CSS

.img-container {
  display: inline-block;
}

@media all and (max-width: 480px) {
  .img-container {
    display: block;
  }
}